Rellax.js – Vanilla JS ile Ücretsiz Parallax Efekti

Paralaks efekti kaydırma doğru yapıldığında inanılmaz görünüyor. Her web sitesinde istediğiniz bir özellik olmayabilir ancak yaratıcı siteler ve açılış sayfaları için paralaks efekti dikkat çekicidir.

Hareketli kaydırma efektleri için bir sürü ücretsiz JavaScript kitaplığı var, ancak bazılarının dosya boyutu büyük veya çok karmaşık.

Bu nedenle paralaks ihtiyaçlarınız için Rellax.js öneriyorum. Bu, Vanilla JavaScript üzerine kurulmuş ücretsiz bir açık kaynak eklentisidir. Dolayısıyla bağımlılıkları yoktur.

Varsayılan olarak, parallax sınıfını sayfa öğelerine atamak için yalnızca basit bir işlev çağrısı gerekir. Ardından, kaydırdığınızda, bu öğeler sabit kalır ve kullanıcının bakış açısıyla birlikte hareket eder.

Bu öğeleri, daha yakın, uzak veya sayfa öğelerinin arkasında görünecek şekilde özelleştirebilirsiniz. Bu sayfada derinlik yanılsaması yaratır ve hepsi basit bir JavaScript kitaplığı üzerinden çalışır.

Bir kopyasını indirmek istiyorsanız, Rellax kaynak kodunun tamamı GitHub‘da ücretsiz olarak mevcuttur.

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

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

İstediğiniz herhangi bir sınıfı kullanabilirsiniz, ancak örnek demo basitleştirmek için .rellax’ı kullanır.

Buradan, parallax öğelerinizi .rellax sınıfı olan bir div içine koyun ve speed özniteliğini ayarlayın. Bu, -10 ile +10 arasındaki değerleri kabul eden data-rellax-speed özel özniteliği aracılığıyla çalışır.

Demo sayfasındaki HTML’den bir örnek snippet:

Ayrıca öğeleri sayfanın merkezinde ortalayabilir ve CSS aracılığıyla öğe konumlarını özelleştirebilirsiniz.

Rellax, sayfayı nasıl yapılandıracağınızı veya sayfanızdaki CSS unsurlarını nasıl tanımlayacağınızı size anlatmaz. Tek yapmanız gereken saf JavaScript ile doğal bir paralaks kaydırma efekti oluşturmaktır. Nasıl kullanacağınız size kalmış.

Canlı bir demoyu görmek için ana siteye bir göz atın veya GitHub repo‘suna göz atın. Sitede ayrıca bir dökümantasyon da mevcut.

Bu makalede web tasarımcıların yaptıkları projelerine kolayca parallax efekti eklemelerini sağlayacak Rellax.js ‘ten bahsettik. Siz de düşüncelerinizi yorum yaparak Mutfağa katkıda bulunabilirsiniz.