Mājas lapa » Toolkit » Rellax.js - bezmaksas paralaksu funkcijas, izmantojot Vanilla JavaScript

    Rellax.js - bezmaksas paralaksu funkcijas, izmantojot Vanilla JavaScript

    Paralaksu ritināšana izskatās neticami, kad izdarīts pareizi. Tas nav funkcija, kuru vēlaties izmantot katrā vietnē, bet gan radošām vietnēm un galvenajām lapām, paralaksu elementiem ātri pievērsiet uzmanību.

    Ir pieejamas daudz bezmaksas JavaScript bibliotēkas animēti ritināšanas efekti bet daudzi cilvēki ir uzpūsti vai pārāk sarežģīti.

    Tāpēc es ieteiktu Rellax.js paralakses vajadzībām. Tas ir bezmaksas atvērtā koda spraudnis, kas veidots uz vaniļas JavaScript nav nekādu atkarību.

    Pēc noklusējuma tā prasa tikai vienkāršu funkciju zvanu piešķirt paralaksu klasei lapu elementus. Tad, ritinot, šie elementi palikt fiksēti un pārvietoties kopā ar lietotāja viedokli.

    Jūs varat pielāgot šos elementus, lai parādītu tuvāk, tālāk vai aiz lapas elementiem. Tas rada dziļuma ilūzija lapā un tas viss darbojas, izmantojot vienu vienkāršu JavaScript bibliotēku.

    Visi Rellax pirmkodi ir pieejami bez maksas GitHub, ja vēlaties lejupielādēt kopiju.

    Visa iestatīšana izmanto vienu JS funkciju mērķauditorijas atlase .rellax piemēram, šādi:

     var rellax = jauns Rellax (“. rellax”); 

    Ņemiet vērā, ka varat izmantot diezgan daudz jebkuru klasi, kuru vēlaties, bet piemērs demo izmanto .rellax vienkāršības labad.

    No šejienes jūs vienkārši ietiniet paralakses elementus iekšpusē div ar .rellax klase un iestatiet ātruma atribūtu. Tas darbojas caur datu pārraides ātrums pielāgots atribūts, kas pieņem vērtības no -10 līdz +10.

    Šeit ir piemērs no HTML demo lapā:

     
    Es esmu ļoti lēns un gluds

    Jūs varat arī centra elementi lapā un pielāgot elementa pozīcijas izmantojot CSS.

    Rellax nenorāda, kā veidot lapu vai definēt CSS elementus savā lapā. Tas viss ir izveidot dabisku paralaksu ritināšanas efektu ar tīru JavaScript. Kā jūs to lietojat, tas ir atkarīgs no jums.

    Lai redzētu a tiešraides demonstrācija, apskatiet galveno vietni vai pārlūkojiet GitHub repo. Tas ietver dažas dokumentācijas, kā arī saites uz tiešraides vietnēm, kurās izmanto Rellax.js.

    Un labākais no visiem, komanda vienmēr ir gatava pieņemt vilkšanas pieprasījumus, tādēļ, ja pamanāt kādas problēmas vai ieteikumi par funkcijām, vienkārši nosūtiet ātru ziņojumu komandai.