Rellax.js - Caracteristici gratuite Parallax Utilizarea JavaScript Vanilla

Scrollingul parallaxelor pare incredibil atunci când este făcut bine. Nu este o caracteristică pe care o veți dori pe fiecare site web, ci pentru site-uri creative și pagini de destinație, elemente de parallax atrage atenția rapid.

Există tone de librării libere de JavaScript pentru efecte de derulare animate dar multe sunt umflate sau prea complexe pentru unii oameni.

De aceea vă recomand Rellax.js pentru nevoile parallaxului. Este un plugin gratuit open source construit pe JavaScript de vanilie, așa că nu are nici o dependență.

În mod implicit, acesta necesită doar un simplu apel pentru funcții pentru a atribui clasei de parallax elementelor de pagină. Apoi, pe măsură ce defilați, aceste elemente stați fix și se deplasează împreună cu punctul de vedere al utilizatorului.

Puteți personaliza aceste elemente să apară mai aproape, mai departe sau în spatele elementelor de pagină. Aceasta creează iluzia profunzimii pe pagină și funcționează printr-o singură bibliotecă JavaScript simplă.

Toate codurile sursă Rellax sunt disponibile gratuit pe GitHub dacă doriți să descărcați o copie.

Întreaga configurație utilizează o singură funcție JS vizând .rellax clasa ca atare:

 var rellax = nou Rellax ("rellax"); 

Rețineți că puteți folosi destul de mult orice clasă doriți, dar exemplul demo folosește .rellax pentru simplitate.

De aici, tu doar împachetați elementele de parallax în interiorul divului cu .rellax clasă și setați atributul de viteză. Aceasta funcționează prin Date-rellax viteză atribut atribut care acceptă valori de la -10 la +10.

Iată un exemplu fragment din HTML pe pagina demo:

 
 Sunt mai lent și mai neted 
 

Poti de asemenea elemente de centru pe pagina și personalizați pozițiile elementelor prin CSS.

Rellax nu vă spune cum să structurați pagina sau cum să definiți elementele CSS pe pagina dvs. Tot ce este este creați un efect de derulare paralaxă naturală cu JavaScript pur. Cum folosiți acest lucru depinde în totalitate de dvs..

Pentru a vedea a live demo, luați o privire pe site-ul principal sau răsfoiți prin repo GitHub. Aceasta include o anumită documentație, împreună cu link-uri către site-urile live folosind Rellax.js.

Și cel mai bine, echipa este în mod constant dispusă să ia cereri de tragere, așa că dacă observați probleme sau aveți sugestii pentru caracteristici, trimiteți un mesaj rapid echipei.