Yazar: suat 10 Haziran 2024
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ı:
İş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.