Roll.js ile kendi sayfa kaydırma efektleri oluşturmak
Tüm web üzerinde düzinelerce kaydırma kütüphanesi bulabilirsiniz. Çoğu JavaScript'te yazılmıştır ve tek sayfa mizanpajları, kaydırma animasyonları ve daha fazlası için rahatlatabileceğiniz kendi efektlerine sahiptir.
Ama ne hakkında kendi kaydırma efektlerinizi kodlama? Ya da bir kullanıcının sayfanın ne kadar aşağı kaydırdığını takip etmenin basit bir yolunu istiyorsanız?
Roll.js, aradığınız kütüphanedir. Bu açık kaynak kodlu komut dosyası, küçük ve kullanımı kolaydır. Bunu birkaç satır JavaScript ile çalıştırabilirsiniz. Ve hepsinden önemlisi, sizi özel bir şey yapmaya zorlamaz, ama daha doğrusu sana araçları verir kendi özel kaydırma özelliklerinizi oluşturmak için.
Bu kütüphanenin amacı, geliştiricilerin kaydırma efektlerini fazla çaba harcamadan yapılandırmalarına yardımcı olmaktır.
Ana GitHub deposuna bakarsanız, birkaç örnek snippet içeren bir kurulum kılavuzu bulacaksınız. Yapabilirsin Kullanıcının ne kadar kaydırdığını aramak için işlevleri çalıştırın, veya farklı “bölmeleri” sayfada.
Bunlar en iyi şekilde tek sayfa mizanpajlarda çalışır, ancak Roll.js'i çok fazla kullanabilirsiniz..
Tek bir işlev çağrısı ile şunları içeren her kaydırma ile veri çekebilirsiniz:
- Toplam sayfa adımları (varsa).
- Toplam% aşağı kaydırılmış sayfa.
- Sayfadaki geçerli konum piksel cinsinden.
- Cihaz boyutuna göre toplam görünüm yüksekliği.
Bu, kullanıcıları sayfanın belirli bölümlerine indirgeyen (veya yukarı) atlama bağlantılarıyla da çalışır.
Ancak bu özelliklerin çoğunu diğer kütüphanelerde de bulabilirsiniz. Roll.js'i bu kadar özel yapan ne??
Bir kısmı sözdizimi, ancak buradaki en büyük satıcı, toplam kütüphane büyüklüğüdür. 8KB küçültüldüğünde. Böyle ayrıntılı bir kaydırma kitaplığı için oldukça küçük!
Bunun ana demo sayfasında nasıl çalıştığını görebilir ve hatta demoları kendiniz kazmak için Roll.js kaynak kodunu indirin.
Canlı demolardan ve raw kitaplık dosyalarından gelen her şey GitHub'dan çıkarılabilir ve birlikte çalışması çok kolaydır..
Ancak, herhangi bir sorunuz, öneriniz varsa veya harika kütüphane için teşekkürlerinizi paylaşmak istiyorsanız, içerik oluşturucuyu @williamngan'a iletebilirsiniz..
