Parallax Navbar: HTML, CSS & JavaScript ile Oluşturma

Parallax Navbar: HTML, CSS & JavaScript ile Oluşturma

Merhaba! Bu makalede, sadece HTML, CSS ve JavaScript kullanarak parallax efektli bir navigasyon çubuğu (navbar) nasıl oluşturacağınızı adım adım açıklayacağım. Bu teknik, web sitenize modern ve etkileyici bir görünüm kazandıracaktır. Hazırsanız başlayalım!

HTML Yapısı

Öncelikle, projemizin temel HTML yapısını oluşturalım. Bu yapıda, navbar’ımız için bir div ve içerik alanımız için başka bir div kullanacağız. Navbar’ın içindeki öğeler (logo, menü öğeleri vb.) nav etiketi içinde yer alacaktır.

<div id="navbar">
  <nav>
    <a href="#">Logo</a>
    <ul>
      <li><a href="#">Ana Sayfa</a></li>
      <li><a href="#">Hakkımızda</a></li>
      <li><a href="#">İletişim</a></li>
    </ul>
  </nav>
</div>
<div id="content">
  <!-- İçerik burada yer alacak -->
</div>

CSS Stili

Şimdi, HTML yapımızı stil verelim. Parallax efektini oluşturmak için, navbar’ın pozisyonunu fixed olarak ayarlayacağız. Ayrıca, sayfa kaydırıldığında navbar’ın arka plan pozisyonunu değiştirmek için background-position özelliğini kullanacağız. Bunun yanında, responsive tasarım için medya sorguları da ekleyelim.

#navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #333;
  color: #fff;
  z-index: 1000; /* Diğer öğelerin üstünde kalmasını sağlar */
  transition: background-position 0.5s ease; /* Geçiş efekti ekler */
}

#navbar nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
}

#navbar ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

#navbar li {
  margin-left: 20px;
}

/* Parallax efekti için */
body {
    background-attachment: fixed;
}

body.parallax-scrolling #navbar {
    background-position: 50% calc(50vh + 50%);
}

JavaScript İşlemleri

Son olarak, JavaScript kullanarak sayfanın kaydırılma olayını dinleyip, navbar’ın arka plan pozisyonunu dinamik olarak değiştireceğiz. Bu sayede parallax efekti oluşacaktır.

window.addEventListener('scroll', function() {
  document.body.classList.add('parallax-scrolling')
});

Bu kod, sayfa kaydırıldığında parallax-scrolling sınıfını body’ye ekler. CSS’deki .parallax-scrolling seçicisi bu sınıfa sahip olduğunda background-position özelliğinin değerini değiştirir ve böylece parallax efekti ortaya çıkar.

İşte bu kadar! Bu adımları takip ederek, kendi parallax navbar’ınızı oluşturabilirsiniz. Daha gelişmiş özellikler eklemek için, CSS animasyonlarını ve JavaScript kütüphanelerini kullanabilirsiniz. Daha fazla web geliştirme ipucu ve öğretici için fatihsoysal.com adresini ziyaret edebilirsiniz. Umarım bu makale faydalı olmuştur!

#Etiketler
#ParallaxNavbar #HTML #CSS #JavaScript #WebGeliştirme #ResponsiveTasarım #FatihSoysal #ParallaxEfekt #WebGeliştirmeÖğreticisi #Programlama