Paralaks Scrolling StickyStack.js ile Daha Kolay

Paralaks etkileri hızlıca dikkatini çek. Bu etkiler bazı arka planları görünümde tut Sayfayı aşağı kaydırırken. Paralaks kaydırmayı birçok web sitesinde ve WordPress temalarında bulacaksınız ve bunlar modern web tasarımının büyük bir parçası..

Ayrıca bir benzersiz paralaks tarzı kullanmak StickyStack.js Eklenti. Onun jQuery üzerine inşa ve her bir ana sayfa bölümünü aşağı kaydırırken üste yapıştırılmış tutar.

Bu oluşturur katmanlı bir web sitesinin yanılsaması her sayfa nerede “yığınları” diğerinin üstüne. Kendi başınıza ayarlamak gerçekten harika ve oldukça kolay.

Kurulumu oldukça kolay olmakla birlikte, ön uç geliştirme konusunda bir anlayış gerektiriyor.

Önce sen olmalısın bireysel sayfa bölümleri oluştur Ana kabın içinde. Bu şekilde olacak HTML’deki her şey, böylece StickyStack jQuery işleviyle her şeyi hedefleyebilirsiniz.

Ayrıca kişiselleştirebileceğiniz birkaç seçenekle birlikte gelir. ana konteyner, istiflemesi gereken öğeler, ve mümkün kutu gölge eğer bu etkiden hoşlanıyorsan.

İşte bir örnek kod biti GitHub sayfasından:

 $ ('. main-content-wrapper'). stickyStack (containerElement: '.main-content-wrapper', yığınlamaElement: 'bölüm', boxShadow: '0 -3px 20px rgba (0, 0, 0, 0.25)' ); 

Bu yaklaşık iki yıl içinde güncellenmemiş olsa da, hala çok güvenilir bir eklenti. O test ettiğim tüm tarayıcılarda çalıştı (Chrome, Safari ve Firefox) ile Tüm jQuery sürümleri için destek.

Artı, küçültülmüş dosya sadece 2KB bir eklenti için iyi bir boyut.

Daha fazla bilgi edinmek için ana depoyu ziyaret edin ve StickyStack'ın neler sunabileceğini görün. Bence en iyi şekilde çalışıyor tek sayfalık web siteleri veya büyük tam ekran arka planlı açılış sayfaları.

Ayrıca bir kontrol edebilirsiniz CodePen'de canlı demo canlı bir sitede bunun nasıl göründüğünü görmek istiyorsanız.