Yazar: suat 10 Haziran 2024

Web tasarımında kullanılan paralaks kaydırma nedir ve nasıl uygulanır?

Paralaks kaydırma, bir web sitesinin tasarımında kullanılan görsel bir efekt tekniğidir. Bu teknik, arka planda ve ön planda farklı hızlarda hareket eden katmanlar oluşturarak derinlik algısı yaratır. Kullanıcı sayfayı kaydırdıkça, farklı katmanlar arasındaki hareket farklı hızlarda gerçekleşir, böylece dinamik ve etkileyici bir deneyim sağlanır.

Paralaks kaydırma genellikle CSS ve JavaScript kullanılarak uygulanır. İşte basit bir paralaks kaydırma uygulamasının adımları:

HTML Yapısını Oluşturma: İlk olarak, paralaks efektini uygulamak istediğiniz katmanları HTML’de oluşturmanız gerekir. Genellikle, arka plan görseli ve üzerinde kaydırma yapılacak diğer içerik katmanları bulunur.
CSS ile Stilleri Tanımlama: Her bir katman için CSS ile stil tanımlamaları yapılır. Özellikle, arka plan katmanının sabit kalması ve üzerindeki içerik katmanlarının hareket etmesi sağlanır.
JavaScript ile Efektin Uygulanması: Paralaks efektini gerçekleştirmek için JavaScript kullanılır. Kullanıcı sayfayı kaydırdıkça, JavaScript kodu ile katmanların konumları ve hızları hesaplanır ve güncellenir.

İşte basit bir HTML, CSS ve JavaScript kullanarak paralaks kaydırma efektinin uygulanması için örnek bir kod:

HTML:

<div class="parallax">
  <div class="parallax-background"></div>
  <div class="parallax-content">
    <h1>Paralaks Kaydırma Örneği</h1>
    <p>Paralaks kaydırma ile derinlik efekti yaratılır.</p>
  </div>
</div>

CSS:

.parallax {
  position: relative;
  height: 500px; /* Paralaks efektinin uygulanacağı yükseklik */
  overflow: hidden;
}

.parallax-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('background.jpg');
  background-size: cover;
  background-position: center;
  z-index: -1;
}

.parallax-content {
  position: relative;
  z-index: 1;
  padding: 50px;
  color: white;
}

JavaScript:

window.addEventListener('scroll', function() {
  var scrollPosition = window.pageYOffset;
  var parallaxElements = document.querySelectorAll('.parallax-background');

  parallaxElements.forEach(function(element) {
    var speed = parseFloat(element.getAttribute('data-speed'));
    var offset = -scrollPosition * speed;
    element.style.transform = 'translateY(' + offset + 'px)';
  });
});

Bu kod, .parallax-background sınıfına sahip arka plan katmanını ve .parallax-content sınıfına sahip içerik katmanını kullanarak bir paralaks kaydırma efekti oluşturur. JavaScript kodu, kullanıcı sayfayı kaydırdıkça arka plan katmanının konumunu günceller.