Rellax.js - Nemokamos paralakso funkcijos naudojant Vanilla JavaScript

Paralakso slinkimas atrodo neįtikėtinai, kai padaryta teisinga. Tai ne funkcija, kurią norėsite kiekvienoje svetainėje, bet kūrybinėms svetainėms ir nukreipimo puslapiams, paralaksams greito dėmesio.

Yra tonų nemokamų „JavaScript“ bibliotekų animuoti slinkimo efektai tačiau kai kurie žmonės yra ištinęs ar pernelyg sudėtingi.

Štai kodėl aš rekomenduoju Rellax.js Jūsų paralakso poreikiams. Tai nemokamas atviro kodo įskiepis, pastatytas ant vanilės JavaScript neturi jokių priklausomybių.

Pagal numatytuosius nustatymus jis reikalauja tik paprasto funkcijų skambučio priskirti paralakso klasę puslapių elementams. Tada, slinkdami, šie elementai sustabdyti ir judėkite kartu su vartotojo požiūriu.

Šiuos elementus galite tinkinti, kad būtų rodomi arčiau, toliau ar už puslapio elementų. Tai sukuria gilumo iliuzija puslapyje ir visa tai veikia per vieną paprastą „JavaScript“ biblioteką.

Jei norite atsisiųsti kopiją, „GitHub“ galima nemokamai gauti visą „Rellax“ kodą.

Visa sąranka naudoja vieną JS funkciją nukreipti į .rellax tokia klasė kaip:

 var rellax = naujas Rellax („. rellax“); 

Atkreipkite dėmesį, kad galite naudoti gana daug bet kurios klasės, kurią norite, bet demo pavyzdys .rellax dėl paprastumo.

Iš čia jūs tiesiog apvyniokite savo paralakso elementus viduje div .rellax klasės ir nustatyti greičio atributą. Tai veikia per duomenų perdavimo greitis pasirinktinis atributas, kuris priima vertes nuo -10 iki +10.

Čia yra pavyzdžio fragmentas iš demonstracinio puslapio HTML:

 
 Aš esu labai lėtas ir sklandus 
 

Tu taip pat gali centro elementai puslapyje ir tinkinti elemento pozicijas per CSS.

„Rellax“ nesako jums, kaip struktūrizuoti puslapį ar kaip nustatyti savo puslapyje CSS elementus. Visa tai yra sukurti natūralų paralakso slinkimo efektą su grynu „JavaScript“. Kaip tai naudoti, tai priklauso nuo jūsų.

Norėdami pamatyti a gyva demonstracija, pažiūrėkite į pagrindinę svetainę arba naršykite „GitHub“ repo. Tai apima kai kuriuos dokumentus, taip pat nuorodas į tiesiogines svetaines naudojant „Rellax.js“.

Ir geriausia, kad komanda nuolat nori priimti traukos užklausas, todėl, jei pastebėsite kokių nors problemų ar turite pasiūlymų dėl funkcijų, tiesiog atsiųskite greitą pranešimą komandai.