Uzun kayan siteler gerçekten yaygın bir web tasarım trendi haline geldi. Bunun en güzel alt türlerinden biri, görüntülerin paralaks efekti vermek için hareket ettiği paralaks kaydırma bölgeleridir. Kullanıcı sayfayı aşağı kaydırdıkça, animasyonlar tetiklenir ve genel olarak doğru uygulandığı takdirde herhangi bir web sitesine taze bir görünüm ve his verir.
Paralaks kayan bir siteyi yapmak sıkıcıdır, çünkü CSS, Javascript ve iyi bir web tasarımı için derinlemesine bilgi gerektirir. Burada, sadece paralaks kaydırma siteleri oluşturmanızı kolaylaştıracak değil, aynı zamanda iyi görünen bir web sayfası geliştirmenizin daha kolay ve daha hızlı hale gelmesi için iyi donanımlı bir paralaks efekt kitaplığına sahip En İyi Paralaks Kaydırma Eklentilerinin bir listesi bulunmaktadır. .
YASAL UYARI : Başlamadan önce, bu eklentileri kullanmak için bazı web teknolojileri bilgisi (HTML / CSS / Javascript) gerektiğini unutmayın. Listelenen eklentilerin çoğu jquery kullanır, bu nedenle Jquery bilgisine de ihtiyaç duyulabilir.
Paralaks Kaydırma Eklentileri
1. ScrollMagic
ScrollMagic, en popüler ve en zengin özelliklere sahip jquery eklentilerinden biridir. Bu bir javascript kütüphanesi görünüşte büyülü kaydırma efektleri oluşturmanıza olanak sağlar. ScrollMagic kullanarak kaydırma konumunuza göre canlandırabilirsiniz. Bu, istediğiniz herhangi bir süre boyunca kaydırma sırasında HTML öğelerini düzeltebilir, taşıyabilir veya hareketlendirebilir ve web sitenize kolayca paralaks efektleri ekleyebileceğiniz anlamına gelir. Son derece özelleştirilebilir ve hafiftir (gziplendiğinde 6 kb). Diğer paralaks kaydırma eklentileri arasında, Scroll Magic en iyi dokümantasyon ve dış kaynaklara sahiptir. Mobil ile de mükemmel uyumlu.
ScrollMagic'in listelenen birçok örneği vardır. Bu kütüphaneyi kullanma konusunda ilham ve rehberlik için onlara göz atın.
Hakkında:
Anasayfa: //janpaepke.github.io/ScrollMagic/
Oluşturan: Jan Paepke
Kurulum:
1. CDN:
2. Github'dan indirin
2. skrollr
skrollr hafif bir saf Javascript ve CSS kütüphanesidir, jQuery dahil değildir. Temel olarak 'CSS için basitleştirilmiş Scroll Magic'. Skrollr kullanmak için Javascript veya herhangi bir jQuery bilmeniz gerekmez. Sadece HTML ve CSS yeterli. skrollr, istediğiniz HTML öğesini canlandırmak için veri niteliklerini kullanır. Skrollr'un ana dezavantajlarından biri, animasyonların yalnızca sayfa kaydırılırken çalışmasıdır. Aksi takdirde tüm efektler bekletilir. skrollr, HTML elemanlarınızın tüm CSS özelliklerini canlandırmanıza izin verir.
Hakkında:
Anasayfa: //prinzhorn.github.io/skrollr/
Oluşturan: Prinzhorn
Kurulum: Github indir
3. sayfaPiling.js 
Sayfa Kazıklama, web sitenizi birbiri üzerine yığılmış farklı bölümler halinde oluşturmanıza olanak sağlayan bir jQuery eklentisidir. Kaydırma veya URL'ye erişildiğinde, her bölüm temiz bir kayan animasyonla ortaya çıkar. pagePiling.js tüm platformlarla (masaüstü, tablet ve mobil) uyumludur ve çoğu tarayıcıyla çalışır. Animasyonlarını desteklemeyen eski tarayıcılarda (IE 7 gibi) incelikle bozulur. Eklentiyi kullanmak için, HTML'nizin içine bir CSS ve bir Javascript dosyası eklemeniz gerekir. pagePiling.js (document) .ready işlevi tarafından başlatıldı:
$( document ).ready( function () {
$( ' #pagepiling ' ).pagepiling();
});
Daha gelişmiş başlatmalar için README.md adresini ziyaret edin.
Hakkında:
Anasayfa: //alvarotrigo.com/pagePiling/
Oluşturan: alvarotrigo
Kurulum: Github indir
4. Alton
Alton bir jQuery 'bize kaydırma jacking' eklentisidir. Kaydırma jakı, tarayıcınızın yerel kaydırmasının, başlatıldığında (fare tekerleğiniz veya dokunmatik yüzeyinizle) sizi ekrandaki bir sonraki dikey noktaya veya bir sonraki kabın üstüne götüreceği hedefli kaydırma lehine devre dışı bırakıldığı anlamına gelir.
Alton, 'Kahraman', 'Bookend' ve 'Standart' olarak adlandırılan üç ayrı türde işlevselliğe izin verir. Standart, her biri% 100 yüksekliğinde tüm sayfa kaydırmayı kullanmanıza izin verir. Bir kaydırma, bir sonraki veya bir önceki bölümü ortaya çıkarır. Bookend, bookend türünde bir deneyim oluşturmanıza izin verirken, Hero yalnızca sayfanın geri kalanında (yeniden etkinleştirilmiş) yerel kaydırmaya sahip olan yalnızca 'Hero' bölümünü girmenize olanak tanır.
Hakkında:
Anasayfa: //paper-leaf.com/alton-jquery-scroll-jacking-plugin/
Hazırlayan: paper-leaf
Kurulum: Github indir
5. Stellar.js
Stellar, paralaks kaydırma efektlerini kolayca ekleyebileceğiniz bir jQuery eklentisidir. Çalıştırmak için önce $ .stellar () işlevini çalıştırmanız gerekir. Tek tek öğeler için animasyon ayarları, o öğedeki veri nitelikleri kullanılarak yapılandırılabilir.
Stellar, kaydırmada yeniden konumlanan arka planlar olan paralaks arkaplanlara bile izin verir. Stellar.js'nin en kullanışlı özelliklerinden biri ofset.
Ofset ebeveynleri ekranın kenarına ulaştığında tüm öğeler orijinal konumlarına geri döner - artı veya isteğe bağlı ofsetinizi eksi olarak ekler. Bu, karmaşık paralaks desenlerini kolayca oluşturmanıza olanak sağlar. (Yıldız Belgeleri)
Hakkında:
Ana Sayfa: //markdalgleish.com/projects/stellar.js/
Oluşturan: Mark Dalgeish
Kurulum: Github indir
6. multiScroll.js
Bu eklenti, pagePiling.js eklentisini yapan aynı geliştirici (alvarotrigo) tarafından oluşturulmuştur. Temelde çoklu kaydırmanın yaptığı şey, her sayfa bölümünün sayfa yüklenirken yerine kayan iki bölünmüş parçaya yüklendiği bir efekt oluşturmanıza olanak tanır. Tarayıcınızda nasıl göründüğünü görmek için ana sayfaya göz atın. multiScroll.js, kaydırma hızını, gevşetmeyi, klavyeyi kaydırma seçeneğini ve daha birçok özelliği ayarlamanızı sağlar, böylece efekti tam olarak istediğiniz gibi özelleştirebilirsiniz.
Hakkında:
Ana Sayfa: //alvarotrigo.com/multiScroll/
Oluşturan: alvarotrigo
Kurulum: Github indir
7. ScrollMe
ScrollMe, sayfanıza basit paralaks kaydırma efektleri eklemek için bir eklentidir. Aşağı kaydırırken sayfadaki öğelerin opaklığını ölçekleyebilir, döndürebilir, çevirebilir ve değiştirebilir. ScrollMe Javascript gerektirmez ve sadece CSS bilgisi yeterlidir. “Animateme” sınıfını ve gerekli veri niteliklerini ekleyerek, herhangi bir HTML öğesini hareketlendirebilirsiniz. ScrollMe, en iyi CSS efektleri eklemek için kullanılır. Hafif ve tüm animasyonlar, denetlemede kullandığınız sürece pürüzsüz.
Hakkında:
Ana Sayfa: //scrollme.nckprsn.com/
Oluşturan: Nick Pearson
Kurulum: Github indir
8. Paralaks Kaydırma
Paralaks Kaydırma, Spotify gibi sitelerde bulunan paralaks görüntü kaydırma efektini oluşturmanıza olanak sağlayan, kullanımı kolay bir jQuery eklentisidir. Kullanımı oldukça basittir - görüntü tutucular için sadece gerekli CSS sınıflarını belirtin. Kullanmak yerine etiketleri, bu eklentiyi kullanmak için belirtilen bir arka plan görüntüsü olan öğeleri kullanmanız gerekir (`background-image` CSS özelliğini kullanarak. CSS @ media sorgularını kullanarak öğeleri duyarlı hale getirebilirsiniz).
Hakkında:
Ana sayfa: //parallax-scroll.aenism.com/
Oluşturan: Aen
Kurulum: Github indir
9. Jarallax
Jarallax, paralaks kaydırma efektleri konusunda uzmanlaşmış bir CSS ve Javascript kütüphanesidir. Jarallax, Javascript (jQuery yok, sadece saf vanilya JS) kullanılarak yapılandırılmıştır. Düzleştirilmiş kaydırma özelliklerini, hareket hızını ve paralaks animasyonunu destekler. Jarallax, birçok tarayıcı tarafından platformlarda desteklenir. Jarallax web sitesinin ihtiyaçlarınız için Jarallax'ı nasıl özelleştireceğinize dair mükemmel belgeleri vardır. Jarallax'da web siteniz için Jarallax'ın nasıl kurulacağını ve nasıl başlayacağınızı gösteren video dersleri de bulunmaktadır.
Hakkında:
Ana sayfa: //www.jarallax.com/
Jarallax tarafından oluşturuldu
Kurulum: Jarallax web sitesinden indirin
10. Superscrollorama
Superscrollorama, kaydırma animasyonlarını destekleyen jQuery tabanlı bir eklentidir. Animasyon performansını ve pürüzsüzlüğü artıran TweenMax ve Greensock Tweening Engine tarafından desteklenmektedir. Superscrollorama animasyonları jQuery aracılığıyla çağrılır ve çoğu TweenMax.js işlevini de kullanabilirsiniz. Maalesef, bu animasyonlar mobil cihazlar tarafından tam olarak desteklenmiyor (çünkü dokunmatik ekranlı cihazlar kaydırmayı farklı şekilde ele alıyor). Ancak setScrollContainerOffset yöntemini kullanarak, Superscrollorama efektlerine mobil cihazlarda erişilebilir.
İşte bunu yapmak için kod:
.setScrollContainerOffset(x, y)
(x: kaydırma kaydırıcısının x ofseti, y: kaydırma kaydırıcısının x ofseti)
Hakkında:
Anasayfa: //johnpolacek.github.io/superscrollorama/
Oluşturan: johnpolacek
Kurulum: Github indir
Ayrıca bkz: 10 en iyi statik site jeneratörleri
