Rellax.js - Vanilla JavaScript Kullanarak Ücretsiz Paralaks Özellikleri

Paralaks kaydırma doğru yapıldığında inanılmaz görünüyor. Her web sitesinde isteyeceğiniz bir özellik değil, yaratıcı siteler ve açılış sayfaları için paralaks öğeleri hızlıca dikkatini çekmek.

İçin ücretsiz JavaScript kitaplığı tonlarca var animasyonlu kaydırma efektleri fakat çoğu kişi şişirilmiş veya bazı insanlar için çok karmaşık.

Bu yüzden tavsiye ederim Rellax.js paralaks ihtiyaçlarınız için. Vanilya JavaScript'i temel alan ücretsiz bir açık kaynak eklentisi. hiçbir bağımlılığı yok.

Varsayılan olarak sadece basit bir fonksiyon çağrısı gerektirir paralaks sınıfını sayfa elemanlarına atamak. Sonra, kaydırma yaparken bu öğeler sabit kal ve kullanıcının bakış açısı ile birlikte hareket edin.

Bu öğeleri daha yakından, daha uzakta veya sayfa öğelerinin arkasında görünecek şekilde özelleştirebilirsiniz. Bu oluşturur derinlik yanılsaması Sayfada ve hepsi basit bir JavaScript kitaplığı üzerinden çalışır.

Bir kopya indirmek istiyorsanız, tüm Rellax kaynak kodları GitHub'da ücretsiz olarak bulunmaktadır..

Tüm kurulum tek bir JS işlevi kullanır hedefleme .rellax bunun gibi sınıf:

 var rellax = yeni Rellax ('. rellax'); 

Not oldukça kullanabilirsiniz istediğiniz herhangi bir sınıf, ama örnek demo kullandı .rellax sadelik uğruna.

Buradan, sadece paralaks elementlerinizi sarar ile bir div içinde .rellax sınıf ve hız niteliğini ayarla. Bu çalışır veri rellax hızlı -10 ile +10 arasındaki değerleri kabul eden özel özellik.

İşte bir örnek pasaj demo sayfasındaki HTML’den:

 
 Ekstra yavaş ve pürüzsüzüm 
 

Ayrıca merkez elemanları sayfada ve eleman konumlarını kişiselleştir CSS ile.

Rellax, sayfanın nasıl yapılandırılacağını veya sayfanızdaki CSS öğelerinin nasıl tanımlanacağını söylemez. Tek yaptığı doğal bir paralaks kaydırma efekti oluşturmak saf JavaScript ile. Bunu nasıl kullanıyorsun tamamen sana kalmış.

Görmek için canlı demo, Ana siteye bir göz atın veya GitHub deposuna göz atın. Bu, Rellax.js kullanan canlı web sitelerine bağlantılar ile birlikte bazı belgeleri de içerir..

Ve en iyisi, takım sürekli olarak istekleri almaya isteklidir, bu nedenle herhangi bir sorun fark ederseniz veya özellikler için önerileriniz varsa, ekibe kısa bir mesaj gönderin.