Parallax Kaydırma, StickyStack.js ile Daha Kolay

Paralaks efektleri dikkat çeker. Bu efektler, sayfayı aşağı doğru kaydırırken belirli arka planları görmenizi sağlar. Birçok web sitesinde ve WordPress temalarında paralaks kaydırmayı bulacaksınız ve bunlar modern web tasarımının büyük bir parçası.

StickyStack.js eklentisini kullanarak benzersiz bir paralaks stili de oluşturabilirsiniz. JQuery üzerine inşa edilmiş ve aşağıya doğru ilerlerken her ana sayfa bölümünün en üste yapışmasını sağlıyor.

Bu, her sayfanın üst üste “yığıldığı” katmanlı bir web sitesinin illüzyonunu yaratır. Kendi başına kurulması gerçekten harika ve oldukça kolaydır.

Kurmak oldukça kolay olsa da, front end gelişimini biraz anlayabilmek gerekir.

Ana konteynerde önce tek tek sayfa bölümleri oluşturmanız gerekir. Bu şekilde, her şeyi HTML’ye çevrilmiş halde olacak, böylece her şeyi StickyStack jQuery işlevi ile hedefleyebilirsiniz.

Ayrıca üst konteyneri özelleştirebileceğiniz, yığınlaması gereken öğeleri ve o efekti isterseniz olası bir kutu gölgesini seçebileceğiniz birkaç seçenek bulunur.

İşte GitHub sayfasından örnek bir kod parçası:

$('.main-content-wrapper').stickyStack({
  containerElement: '.main-content-wrapper',
  stackingElement: 'section',
  boxShadow: '0 -3px 20px rgba(0, 0, 0, 0.25)'
});

Bu yaklaşık iki yıl içinde güncellenirken, yine de çok güvenilir bir eklentidir. Test ettiğim tüm tarayıcılarda (Chrome, Safari ve Firefox) jQuery’nin tüm sürümlerine destek vererek çalıştı.

Ayrıca, küçültülmüş dosya yalnızca bir eklenti için uygun bir boyut olan 2 KB’dir.

Daha fazla bilgi edinmek için ana repo’yu ziyaret edin ve StickyStack’in neler sunabileceğini görün. Tek sayfalı web sitelerinde veya tam ekran arka planı olan açılış sayfalarında en iyi sonucu verdiğini düşünüyorum.

Bunun canlı bir sitede nasıl göründüğünü görmek istiyorsanız, CodePen’de canlı bir demoyu da kontrol edebilirsiniz.

Bu makalede modern web tasarımın büyük bir parçası olan parallax efektini uygulamanıza yardımcı olan StickyStack.js jQuery eklentisinden bahsettik. Siz de düşüncelerinizi yorum yaparak bizlerle paylaşabilirsiniz.