Ce este derularea paralaxelor?
Parallax-derularea include un fundal care se deplasează la o viteză diferită de viteza conținutului, creând un efect 3D atunci când derulează pagina. Acest efect poate fi un plus excelent pentru orice locație, dar, din păcate, cu abuz care provoacă iritare. Din când în când, site-urile sunt pe deplin construite în acest sens și, de regulă, experiența cu astfel de site-uri nu este foarte disponibilă. Și tocmai pentru că efectul de parallax animă, de obicei, imagini în fundal, în timp ce greutatea totală a site-ului este mult crescută și ca urmare site-ul este încărcat lent.
Câteva exemple de astfel de abuzuri, în opinia mea, sunt site-ul Saukoni care a prezentat site-urile Kinvara 3 și Oakley - Sunt invincibil. al căror total de aproximativ 20 MB (înainte de a fi fost de aproximativ 50 MB!).
Acum, dacă aveți o idee despre cum arată acest efect, să vedem cum putem folosi Stellar.js pentru ao recrea.
Ce este Stellar.js
Stellar.js este un plugin jQuery care vă permite să adăugați cu ușurință un efect parallax-scrolling pe site-ul dvs. În ciuda faptului că proiectul nu mai este suportat, plug-in-ul este încă stabil și este compatibil cu cele mai recente versiuni ale jQuery; utilizate de dezvoltatori pentru site-urile lor. Acest plugin jQuery este popular în registrul pluginurilor jQuery. și probabil ați auzit deja despre asta.
Acum, după descrierea lucrării pluginului, să ne uităm la modul în care îl puteți utiliza pe site-ul dvs. Web.
Noțiuni de bază cu Stellar.js
Este foarte ușor să începeți să lucrați cu Stellar.js. Mai întâi, descărcați plug-in-ul și conectați-l la pagină.
Acum, pagina dvs. este pregătită să lucreze cu pluginul pentru implementarea efectului paralax. Pluginul vă permite să aplicați un efect oricărui element de derulare de pe pagină, de exemplu, la obiectul ferestrei etc. Pentru a face acest lucru, selectați un element cu jQuery și apoi apelați stelar () pe el.
Codul minim care folosește această bibliotecă pentru obiectul ferestrei este prezentat mai jos:
Pentru obiectul ferestrei, biblioteca oferă și o intrare scurtă:
În acest caz, biblioteca va căuta orice fundal sau elemente de parallax în elementul specificat și va schimba poziția lor atunci când derulează elementul.
Dacă doriți să vedeți lucrarea plug-in-ului Stellar.js pentru implementarea efectului de parallax atunci când derulați o pagină, atunci aruncați o privire la ea.
Stellar.js. la fel ca multe alte pluginuri, gestionăm bine. De fapt, puteți seta mai mulți parametri și puteți configura pluginul în funcție de nevoile dvs. Stellar.js vă permite să setați ambele setări generale pentru toate elementele și setările pentru fiecare element individual. Setările generale sunt transmise metodei stellar (); opțiunile pentru un anumit element sunt setate prin atributele de date * (atributul de date). În această secțiune, nu voi lua în considerare toate opțiunile posibile, dar puteți citi despre ele în caietul de sarcini.
Prima opțiune principală determină direcția efectului. Efectul clasic de derulare se bazează pe derularea de sus în jos sau invers, dar puteți, de asemenea, să indicați deplasarea de la stânga la dreapta și viceversa sau ambele în același timp. Pentru aceasta puteți utiliza două proprietăți booleene pentru orizontală și verticală. Pentru ei, valoarea implicită este adevărată.
O altă opțiune interesantă este receptivă. Actualizează conținutul parallaxului atunci când se încarcă o pagină și se redimensionează o fereastră. Implicit este fals.
Pentru elementele individuale, proprietatea cea mai frecvent utilizată este raportul date-stelar-fundal. Această proprietate are un număr pozitiv ca valoare și vă permite să modificați viteza efectului la un anumit element. De exemplu, raportul de date stelare-fundal = "0.5" înseamnă că viteza elementului va deveni jumătate din viteza reală de defilare. Dacă doriți să utilizați acest atribut cu o valoare mai mică de 1, documentația sugerează setarea atașamentului de fundal: fix; (valoarea fixă face încă imaginea de fundal a elementului: imaginea de fundal nu se derulează, spre deosebire de conținutul elementului) în stiluri față de element.
Știind ce face plug-in-ul și cum se configurează, să începem prin a examina un exemplu real.
În această secțiune, vom crea un exemplu de lucru bazat pe pluginul Stellar.js cu opțiunile discutate mai sus. În primul rând, trebuie să creați un marcaj. În următorul cod, creăm 6 blocuri de text.
CSS-ul final arată astfel:
În cele din urmă, trebuie să executăm efectul prin apelul către metodele stelare (). În acest exemplu, setăm și câteva opțiuni comune:
Un exemplu viu pentru codul de mai sus este prezentat mai jos:
Articole similare
Trimiteți-le prietenilor: