Rellax.js - Free Parallax funkcie pomocou Vanilla JavaScript

Posúvanie paralaxy vyzerá neuveriteľne, keď je správne. Nie je to funkcia, ktorú budete chcieť na každej webovej stránke, ale na kreatívne stránky a vstupné stránky, prvky paralaxy chytiť pozornosť rýchlo.

Existuje množstvo bezplatných knižníc pre jazyk JavaScript animované efekty posúvania ale mnohé sú pre niektorých ľudí nadmerné alebo príliš zložité.

Preto odporúčam Rellax.js pre potreby paralaxy. Je to bezplatný open source plugin postavený na javisku JavaScript, takže to nemá žiadne závislosti.

V predvolenom nastavení je vyžaduje iba jednoduché volanie funkcie priradiť trielu paralaxy elementom stránky. Potom, ako rolujete, tieto prvky zostať pevný a pohybovať sa spolu s pohľadom užívateľa.

Tieto prvky môžete prispôsobiť tak, aby sa zobrazovali bližšie, ďalej alebo za prvkami stránky. Tým sa vytvorí ilúzia hĺbky na stránke a to všetko funguje prostredníctvom jednoduchej knižnice JavaScript.

Všetok zdrojový kód systému Rellax je k dispozícii zdarma na stránkach GitHub, ak si želáte stiahnuť kópiu.

Celé nastavenie používa jednu funkciu JS zacielenie na .rellax triedy ako takto:

 var rellax = nový Rellax ("rellax"); 

Poznámka: môžete použiť skoro akejkoľvek triede, ktorú chcete, ale príklad demo používa .rellax pre jednoduchosť.

Odtiaľ ste práve zabaliť prvky paralaxy vnútri div s .rellax triedy a nastavte atribút rýchlosti. To funguje cez dát rellax rýchlosťou vlastný atribút, ktorý akceptuje hodnoty od -10 do +10.

Tu je jeden príklad úryvku z HTML na demo stránke:

 
 Som navyše pomalý a hladký 
 

Môžete tiež stredové prvky na stránke a prispôsobte pozície prvkov cez CSS.

Spoločnosť Rellax vám nehovorí, ako štruktúrovať stránku alebo ako definovať prvky CSS na vašej stránke. To všetko je vytvorte efekt scrollingu prirodzeného paralaxy s čistým JavaScriptom. Ako používate to je úplne na vás.

Ak chcete zobraziť položku a živé demo, pozrite sa na hlavnú stránku alebo prehliadajte repo GitHub. To zahŕňa aj nejakú dokumentáciu spolu s odkazmi na živé webové stránky pomocou programu Rellax.js.

A najlepšie zo všetkého je, že tím je neustále ochotný vziať požiadavky na tah, takže ak spozorujete nejaké problémy alebo máte návrhy na funkcie, pošlite rýchlu správu tímu.