Cool Scrolling Effects için JavaScript Kitaplıkları
İyi tasarlanmış bir animasyon ile bir web sitesi tasarımı hayat buluyor. Projenize efektler eklemek için uygun kütüphaneleri arıyorsanız, burada bazı kütüphanelerin listesini hazırladım. scroll olayına dayalı efektler vermek için kullanabilirsiniz..
Bir kullanıcı web sayfanızı aşağı kaydırdığında, işlem Çeşitli animasyon seçeneklerini tetiklemek için tasarlanabilir solma efektleri, bulanıklık, 3B, paralaks ve daha fazlası gibi. Site tasarımınızda bu tür bir yanıtı elde etmenize yardımcı olabilecek 25 JS kütüphanesi var.
Scroll Reveal
Hem web hem de mobil cihazlar için kaydırma animasyonu eklemeyi kolaylaştıran bir kütüphane. Özel hareket hızı, 3B dönüşler, süre ve canlandırmak istediğiniz öğeye birçok mor parametre ayarlayabilirsiniz.
Bağımlılıklar: hiçbiri | Boyut: 2.9kb | Lisans: MİT
Aniview
Animasyonları yalnızca öğeniz görüntüleme alanına girdiğinde etkinleştirmek için Animate.CSS ile birlikte çalışan bir eklenti.
Bağımlılıklar: jQuery | Boyut: 1kb | Lisans: N / A
Görünümüne Fade
Önceden belirlenmiş görünüm alanlarına girerken veya çıktıklarında öğelere solma giriş / çıkış efekti ekleyen bir eklenti.
Bağımlılıklar: jQuery | Boyut: 3.81kb | Lisans: N / A
VAY
WOW, scroll olayı üzerine Animate.css animasyonlarını gösterecek. Animasyon süresini, gecikmeleri, ofsetleri ve yinelemeleri doğrudan HTML işaretlemesinden ayarlayabilir, ardından öğenin sınıfını JS'den arayabilirsiniz..
Bağımlılıklar: Animate.css | Boyut: 8.23kb | Lisans: MİT
ScrollMagic
Bu eklenti, bir kullanıcı sayfayı kaydırdığında 'Büyülü' bir etki gösterecektir. Hepsi kaydırma konumuna bağlı olarak animasyon yapmak, bir öğeyi sabitlemek veya CSS sınıfını değiştirmek için mükemmeldir. ScrollMagic, bir animasyon sahnesi oluşturmak için GSAP ve VelocityJS ile birlikte çalışabilir. Demoların tamamını buradan görün.
Bağımlılıklar: jQuery, GSAP, Velocity.js | Boyut: 16.9kb | Lisans: MİT
jScrollability
jScrollability, karmaşık kaydırma tabanlı animasyonlar içeren tek bir web sayfası oluşturmanıza olanak sağlar. Kullanıcı kayması üzerine, eleman kaydırma konumlarına göre hareketlendirilecektir. Animasyonlar kaydırma derinliğine göre yayınlanır ve tabii ki animasyonun başlangıcını ve sonunu ayarlayabilirsiniz..
Bağımlılıklar: jQuery | Boyut: 1.86kb | Lisans: MİT
pushIn.js
Bir kullanıcı sayfayı kaydırdığında çalışan herhangi bir öğeye dolly-push veya push-in efekti eklemek için basit bir kütüphane. Uygulaması kolaydır: sadece start, stop ve hız parametrelerini ekleyin. Veri parametreler HTML öğenize.
Bağımlılıklar: Yok | Boyut: 4.94kb | Lisans: N / A
Scrollissimo
Yumuşak kaydırma kontrollü animasyonlar eklemek için bir JS kütüphanesidir. Daha yumuşak animasyonlar oluşturmak için Greensock'ın tweens ve zaman çizelgelerini kullanır..
Bağımlılıklar: GreenShock TweenLite / TweenMax | Boyut: 2.94kb | Lisans: N / A
jQuery Animasyon Kaydırma Eklentisi
Bu Greensock kullanarak vitrin tetiklemeli animasyon eklemek için bir jQuery eklentisi. Kolaylaştırma, dönüştürme, ölçekleme, döndürme ve 3D animasyonlarla öğeleri hareketlendirmeyi kolaylaştırır.
Bağımlılıklar: jQuery, GreenShock | Boyut: 14kb | Lisans: GNU GPL
Circlr
Circlr, kaydırma animasyonuyla, fare olaylarıyla veya dokunma olaylarıyla tetiklenen bir öğeye dönüş animasyonu oluşturmanıza olanak sağlar. Kullanıcı kaydırma ile etkinleştirilen, tüm 360 dereceden görülebilen bir ürünün vitrini yapmak için mükemmeldir..
Bağımlılıklar: Yok | Boyut: 6.05kb | Lisans: MİT
Scrollimator
Scrollimator size pozisyon ve kaydırma ilerlemesini gösterecek ve kullanıcı kaydırma davranışına eklenmiş ara animasyonlarını değiştirmek için kullanabileceğiniz değerleri döndürecektir. Dikey ve yatay kaydırmayı destekler.
Bağımlılıklar: Yok | Boyut: 37.7kb | Lisans: N / A
Geçişli
Crossfade, crossfade efektini bir görüntüye eklemek için kullanılan bir eklentidir. Bir kullanıcı daha aşağı kaydırdıkça bulanık efekt devam edecek.
Bağımlılıklar: jQuery | Boyut: 3.19kb | Lisans: MİT
Sayfa Kaydırma Etkisi
Bu, CodyHouse tarafından oluşturulan deneysel sayfa kaydırma efektleri için bir kütüphanedir. Kullanır velocitey.js animasyonlar.
Bağımlılıklar: jQuery, Velocity.js | Boyut: 17.6kb | Lisans: N / A
jquery.parallax-kaydırma
Bu kütüphane dikey sayfa kaydırmaya pürüzsüz bir paralaks efekti eklemenizi sağlar. Sadece jQuery ve jquery.easing.1.3.js dosyasını içe aktarın, ardından 'Veri paralaks' efekti özelleştirmek için öğenize nitelik ve isteğe bağlı patametreler.
Bağımlılıklar: jQuery, jQuery.easing | Boyut: 8.72kb | Lisans: GNU GPL
parallax.js
Parallax.js, Spotify web sitesinden ilham alan paralaks kaydırma efekti ekleyen basit bir eklentidir.
Bağımlılıklar: jQuery | Boyut: 6.63kb | Lisans: MİT
Enllax
Enllax, herhangi bir kaydırma elemanına paralaks efekti uygulamak için kullanılan süper hafif bir kütüphanedir. Arka plan veya ön plan öğelerini bu etkiye sahip olacak şekilde ayarlayabilirsiniz. Hem dikey hem de yatay kaydırma için çalışır.
Bağımlılıklar: jQuery | Boyut: 1.53kb | Lisans: MİT
Kaydırmada bulanıklık
Bu kütüphane, sayfa kaydırmayla tetiklenecek bir görüntüye bulanıklık efekti eklemenize yardımcı olur. Sayfayı ne kadar derin kaydırırsanız, görüntü o kadar bulanıklaşır..
Bağımlılıklar: Yok | Boyut: 1.1kb | Lisans: N / A
boxLoader
boxLoader, sayfa kaydırma sırasında öğeleri yüklemek için basit bir eklentidir. Ayarlamanız gereken parametre yönlerdir (x veya y), yüzde olarak konum, etki ve süredir.
Bağımlılıklar: jQuery | Boyut: 3.42kb | Lisans: N / A
Eğik Sayfa Kaydırma
Bir kullanıcı bir sayfada gezinirken, bu eklenti ayarladığınız öğeye harika bir 3D eğik efekt gösterecektir.
Bağımlılıklar: jQuery | Boyut: 1.5kb | Lisans: GNU GPL
AhRelax
AhRelax hızlı kaydırma tabanlı animasyonlar yapmanın bir yolunu sunar. Hafif ve aynı zamanda mükemmel bir performansa sahip. Burada daha fazla okuyabilirsiniz.
Bağımlılıklar: jQuery | Boyut: 1.6kb | Lisans: MİT
Süslü Kaydırma
Android veya iOS'ta taşma kaydırma efekti görürseniz, bu eklentiyle artık bunu sitenize uygulayabilirsiniz. Bir kullanıcı sayfanın üstüne / altına ulaştığında, bir sıçrama veya parlama ya da animasyon ekleyebilirsiniz..
Bağımlılıklar: jQuery | Boyut: 2.64kb | Lisans: GNU GPL
Paralaks görüntü kaydırma
Bu eklenti, elemanları yüzdürür ve kullanıcı sayfayı aşağı veya yukarı kaydırırken hareket eder.
Bağımlılıklar: jQuery | Boyut: 8.69kb | Lisans: MİT
Rlsmooth
Bu, bir kullanıcı sayfayı aşağı veya yukarı kaydırdığında akan efekti oluşturmak için küçük bir eklentidir. Üç efekt mevcuttur: slayt, solma ve göster.
Bağımlılıklar: jQuery | Boyut: 1.95kb | Lisans: MİT
ScrollMe
Sayfa kaydırmaya ölçek, döndürme, çevirme ve öğelerin opaklığını değiştirme gibi basit efektler ekler. Kurulumu kolaydır: jQuery, bu eklentiyi içe aktarın ve öğenin işaretlemesindeki animasyon parametrelerini ayarlayın.
Bağımlılıklar: jQuery | Boyut: 5.45kb | Lisans: N / A
Paralaks ImageScroll
Bu eklenti, sayfanızdaki herhangi bir resme paralaks efekti vermenizi sağlar. Etkinin işe yaraması için CSS3 Dönüşümünü kullanır. Bu eklenti jQuery ve AMD'yi destekliyor.
Bağımlılıklar: jQuery | Boyut: 8.01kb | Lisans: MİT
