Yazar: admin 23 Şubat 2024
Paralaks scrolling, bir web sitesinde arka plan ve ön planın farklı hızlarda hareket etmesini sağlayan bir tasarım tekniğidir. Bu efekt, kullanıcının bir sayfada aşağı veya yukarı kaydırdığında, arka planın ve ön planın bağımsız olarak hareket etmesiyle oluşur. Paralaks scrolling, sayfa derinliği ve hareket hissi yaratmak için kullanılabilir, böylece kullanıcılar sitede gezinirken daha ilgi çekici bir deneyim yaşarlar.
Paralaks scrolling’i uygulamak için aşağıdaki adımları izleyebilirsiniz:
<div class="parallax"> <div class="parallax-background"></div> <div class="content"> <!-- Sayfa içeriği buraya gelecek --> </div> </div>background-attachment özelliği kullanılabilir. .parallax { height: 100vh; /* Sayfa yüksekliği kadar alan kaplasın */ overflow: hidden; position: relative; } .parallax-background { background-image: url('background.jpg'); background-size: cover; background-attachment: fixed; /* Paralaks efektini elde etmek için sabit pozisyon kullanılır */ height: 100%; width: 100%; position: absolute; top: 0; left: 0; z-index: -1; /* Ön plandan geride kalması için z-index kullanılır */ } .content { padding: 50px; z-index: 1; position: relative; }window.addEventListener('scroll', function () { var scrolled = window.scrollY; var parallaxBackground = document.querySelector('.parallax-background'); parallaxBackground.style.transform = 'translateY(' + scrolled * 0.5 + 'px)'; });Bu örnek, temel bir paralaks scrolling yapısını gösterir. Tasarımın karmaşıklığına bağlı olarak, daha fazla katman, efekt ve stil ekleyebilirsiniz. Ancak, paralaks scrolling’i kullanırken aşırıya kaçmamak ve kullanıcı deneyimini olumsuz yönde etkilememek önemlidir.