Meniul
AcasăBios

Secțiunile de paralaxă sunt ca un tort stratificat. Rău: utilizarea evenimentelor de defilare. Poziție: lipicioasă pentru a ajuta

Efectul de paralaxă este foarte tehnică interesantă. La defilare imagine de fundal se mișcă mai lent decât conținutul, iar rezultatul este iluzia spațiului 3D. ÎN această lecție vom demonstra simplu şi metoda eficienta obține un efect minunat.

Marcare

Această tehnică se bazează pe controlul vitezei de mișcare a imaginii de fundal. Să creăm Marcaj HTML, conținând două secțiuni cu atributele „data-type” și „data-speed” . Scopul atributelor va fi dezvăluit puțin mai târziu:

Etichetele cu atribute de tip de date și viteză de date vă permit să faceți marcajul simplu și clar.

Conform specificației, orice atribute care încep cu date- vor fi tratate ca stocare privată a datelor. În plus, nu au niciun efect asupra șablonului.

Deoarece trebuie să controlăm viteza de defilare a imaginilor de fundal, vom folosi data-type="background" și data-speed="10" pentru parametrii cheie.

Apoi vom adăuga o etichetă la fiecare etichetă.

Poziționare absolută Efect de paralaxă simplu

Vom derula fundalul etichetei mai lent decât conținutul său, adică . Acest lucru creează iluzia paralaxei.

CSS

Înainte de a ajunge la magia jQuery, să adăugăm imagini de fundal fiecărui element din codul CSS.

#acasă ( fundal: url(home.jpg) 50% 0 repetat fix; înălțime minimă: 1000px; ) #about ( fundal: url(about.jpg) 50% 0 înălțime minimă fără repetare: 1000px; )

Și să definim stiluri pentru elementele rămase ale paginii noastre demo.

#acasă ( fundal: url(home-bg.jpg) 50% 0 repetat fix; înălțime minimă: 1000px; înălțime: 1000px; margine: 0 automat; lățime: 100%; lățime maximă: 1920px; poziție: relativă; ) #articol de origine ( înălțime: 458 px; poziție: absolut; aliniere text: centru; sus: 150 px; lățime: 100%; ) #about ( fundal: url(about-bg.jpg) 50% 0 repetat fix; min-înălțime : 1000px; înălțime: 1000px; marjă: 0 automat; lățime: 100%; lățime maximă: 1920px; poziție: relativă; -webkit-box-shadow: 0 0 50px rgba(0,0,0,0.8); box- umbră: 0 0 50px rgba(0,0,0,0.8); ) #despre articol (înălțime: 458px; poziție: absolut; text-align: center; sus: 150px; lățime: 100%; )

Cod magic

Folosim jQuery. Sa incepem cu metoda standard document.ready() pentru a vă asigura că pagina este încărcată și pregătită pentru manipulare.

$(document).ready(funcție())( ));

Acum avem nevoie de atenție. Primul lucru care se întâmplă aici este să iterați prin toate elementele cu atributul data-type="background" de pe pagină.

$(document).ready(function())( $("sectiune").each(function())( var $bgobj = $(this); // Atribui obiectul )); ));

La funcția .each() vom adăuga o altă funcție.scroll() , care este apelată când începe derularea.

$(fereastră).scroll(funcție () (

Trebuie să determinați cât timp a derulat utilizatorul pagina și apoi să împărțiți valoarea rezultată la valoarea definită în atributul data-speed.

Var yPos = -($window.scrollTop() / $bgobj.data("viteza"));

$window.scrollTop() - obțineți valoarea curentă de defilare de sus. $bgobj.data(„viteza”) se referă la atributul data-speed din marcaj. yPos este valoarea finală care este folosită pentru defilare. Cu toate acestea, este utilizată o valoare negativă, deoarece fundalul este mutat la direcție inversă raportat la derularea utilizatorului.

În exemplul nostru, atributul data-speed este setat la 10. Să presupunem că fereastra browserului derulează 57px. Aceasta înseamnă că 57px este împărțit la 10 = 5,7px.

// Colectați poziția de fundal var coords = "50% "+ yPos + "px"; // Mută ​​fundalul $bgobj.css(( backgroundPosition: coords ));

Acum trebuie să colectăm toate datele într-o singură valoare. A salva pozitie orizontala fundalul este static, folosim o valoare de 50% pentru proprietatea sa xPosition. Apoi adăugăm yPos ca valoare a proprietății yPosition și apoi atribuim coordonatele fundalului: $bgobj.css(( backgroundPosition: coords )); .

ÎN forma finala codul va arata astfel:

$(document).ready(function())( $("secțiune").each(function())( var $bgobj = $(this); // Atribuiți obiectul $(window).scroll(function() ( var yPos = -($window.scrollTop() / $bgobj.data("viteza")); // Puneți coordonatele de fundal împreună var coords = "50% "+ yPos + "px"; // Mutați fundalul $bgobj.css (( backgroundPosition: coords )); )); )); ));

Clip pentru IE

Un lucru rămâne: versiunile mai vechi de IE nu pot afișa și eticheta. Problema este ușor de rezolvat, vom folosi soluție standard pentru a crea elemente care vor forța în mod magic browserul să recunoască etichetele HTML5.

// Creați elemente pentru IE document.createElement("articol"); document.createElement(„secțiune”);

În plus, folosim fișierul resetați css astfel încât toate browserele să afișeze pagina în același mod.

Acest articol arată cum să folosind CSS transformări și manipulări cu 3D pentru a crea un efect de paralaxă pe site folosind CSS pur.

Parallax este aproape întotdeauna creat cu folosind JavaScriptși, cel mai adesea, se dovedește a fi consumatoare de resurse, datorită atașării ascultătorilor la evenimentul de defilare, modificând direct DOM-ul și declanșând redesenări și rearanjamente inutile. Toate acestea se întâmplă asincron cu firul în care browserul redă pagina, motiv pentru care defilarea începe să încetinească și imaginea se rupe în bucăți. Mai mult implementari corecte paralax tracks defilează și utilizează actualizări DOM amânate folosind requestAnimationFrame . Rezultatul este unul diferit din punct de vedere calitativ, dar de ce să nu scăpați cu totul de JavaScript?

Mutarea efectului de paralaxă în CSS vă scutește de problemele de performanță și manipulările inutile, permițând browserului să regleze totul singur folosind accelerare hardware. Ca rezultat, aproape toate procesele care necesită resurse intensive sunt gestionate direct de motorul browserului. Rata cadrelor (FPS) rămâne stabilă, iar imaginea devine netedă. În plus, puteți combina imediat paralaxa cu alte caracteristici CSS - interogări media sau suporturi. Paralaxa receptivă - ce este?

Teorie Înainte de a înțelege cum funcționează acest mecanism, să creăm marcajul necesar:

... ... ...
Și stiluri de bază:

Parallax (perspectivă: 1px; înălțime: 100vh; overflow-x: ascuns; overflow-y: auto; ) .parallax__layer (poziție: absolut; sus: 0; dreapta: 0; jos: 0; stânga: 0; ) .parallax__layer- -bază ( transform: translateZ(0); ) .parallax__layer--back ( transform: translateZ(-1px); )
Toată magia se întâmplă în clasa de paralaxă. Definirea proprietăților stilului de înălțime și de perspectivă va seta perspectiva elementului în centrul său, creând o fereastră de vizualizare 3D fixă. overflow-y: auto va permite conținutului din interiorul elementului să defileze în mod normal, în timp ce descendenții elementului vor fi desenați în raport cu o perspectivă fixă. Aceasta este cheia pentru crearea efectului de paralaxă.

În continuare, clasa paralax__layer. După cum sugerează și numele, definește stratul de conținut căruia i se va aplica efectul de paralaxă. Un element cu această clasă este scos din fluxul general de conținut și poziționat pentru a-și umple recipientul.

În cele din urmă, avem clasele modificatoare parallax__layer--base și parallax__layer--back. Acestea sunt necesare pentru a regla viteza de defilare a elementelor de paralaxă, deplasându-le de-a lungul axei Z (eliminându-le sau aducându-le mai aproape de fereastra). Pentru concizie, am făcut doar două viteze de defilare - vom mai adăuga câteva mai târziu.

Corecția adâncimii Deoarece efectul de paralaxă este creat de transformări 3D, mutarea unui element de-a lungul axei Z are efectul secundar de a modifica dimensiunea elementului în funcție de faptul că este mai aproape sau mai departe de fereastra de vizualizare. Pentru a remedia acest lucru, trebuie să aplicăm o transformare scale(), astfel încât elementul să fie desenat la dimensiunea inițială:

Parallax__layer--back ( transform: translateZ(-1px) scale(2); )
Coeficientul de scalare poate fi calculat folosind formula 1 + (translateZ * -1) / perspective) . De exemplu, dacă perspectiva ferestrei este setată la 1px și compensăm elementul cu -2px pe axa Z, atunci factorul va fi scale(3) .

Parallax__layer--deep ( transform: translateZ(-2px) scale(3); )

Ajustarea vitezei stratului Viteza stratului este controlată de o combinație de perspectivă și valori de decalaj Z. Elementele cu valori Z negative se vor derula mai lent decât elementele cu valori Z pozitive. Cu cât diferența dintre valoare și 0 este mai mare, cu atât efectul de paralaxă este mai pronunțat.
(adică translateZ(-10px) va derula mai lent decât translateZ(-1px)). Crearea diferitelor secțiuni ale efectului de paralaxă Exemplele anterioare au demonstrat tehnica de bază de utilizare continut simplu, dar majoritatea site-urilor paralax împart pagina în diferite secțiuni cu efecte diferite. Iată cum să o implementăm în metoda noastră.

În primul rând, avem nevoie de un element paralax__group pentru a ne grupa straturile împreună:

... ... ...
CSS-ul pentru el ar arăta astfel:

Paralax__group (poziție: relativă; înălțime: 100vh; transform-style: preserve-3d; )
În acest exemplu, vreau ca fiecare grup să umple fereastra de vizualizare, așa că specific înălțimea: 100vh , deși numărul pentru fiecare grup poate fi diferit dacă este necesar. transform-style: preserve-3d împiedică browserul să aplatizeze elementele parallax__layer, iar position: relative permite ca elementele copil parallax__layer să fie poziționate în raport cu grupul lor.

O regulă importantă de reținut este că atunci când grupăm elemente, nu putem tăia conținutul din interiorul grupului, deoarece overflow: ascuns pe elementul parallax__group va rupe întregul efect de paralaxă. Conținutul nedecupat va face ca elementele secundare să iasă în afara limitelor. Prin urmare, trebuie să vă jucați cu valoarea z-index a grupului pentru a vă asigura că conținutul va fi ascuns și afișat corect pe măsură ce utilizatorul derulează site-ul.

Nu există greu sau reguli rapide despre lucrul cu straturi și metode diferite implică implementare diferită. Dar pentru a simplifica depanarea poziționării straturilor, puteți utiliza simpla transformare elemente de grup:

Parallax__group ( transform: translate3d(700px, 0, -800px) rotateY(30deg); )
Uitați-vă la următorul exemplu și observați caseta de selectare depanare!

Efectele de paralaxă rămân relevante. Este despre despre o tehnică specială în care imaginea de fundal se mișcă mai încet decât elementele din prim-plan. Acest efect poate fi aplicat oricărui tip de site web, este distractiv de creat și crește implicarea utilizatorilor. Acest efect nu trebuie să fie utilizat pe fiecare pagină – defilarea paralaxă este o tehnică excelentă pentru pagina principala, atrăgând atenția utilizatorilor către CTA sau alt conținut.

Efectele de paralaxă creează un element de profunzime, distanță și un sentiment mai puternic de tridimensionalitate decât alte tehnici.

Pe de altă parte, efectele de paralaxă nu funcționează întotdeauna pe dispozitivele mobile.

Mai jos, voi da 5 variante interesante efecte de paralaxă și stiluri.

1. Animație care arată modificările

Utilizați efectul de paralaxă pentru a afișa modificările din proiectul dvs. Straturile de mișcare pot transmite segmente de timp sau spațiu.

Cel mai bine, efectele de paralaxă indică schimbări atunci când funcționează cu conținutul site-ului.

În exemplul de mai sus, Porsche Evolution arată schimbări în timp în fundal și model nou mașini în prim-planul fiecărei imagini. Muzica se schimbă și ea în funcție de deceniu.

Designul site-ului îi face pe utilizatori să deruleze, deoarece vă întrebați cum va arăta următoarea mașină. Această tehnică funcționează atât în ​​ordine cronologică, cât și în ordine cronologică inversă – chiar și muzica redă o piesă adecvată epocii când revii la vizualizarea modelelor anterioare.

Sonance folosește paralaxa pentru a demonstra schimbările în spațiu. Aici, efectul de paralaxă face parte din ansamblu șablon de navigare, și arată utilizatorului locația sa în ierarhie.

2. Încurajează derularea

Motivul pentru care efectul de paralaxă poate crea implicare este că încurajează derularea, forțând utilizatorul să interacționeze cu designul pentru o perioadă mai lungă de timp.

Multe modele care folosesc efecte de paralaxă includ un indiciu mic, dar vizibil, care ajută utilizatorul să înțeleagă cum să înceapă să interacționeze cu designul și ce să facă în continuare.

Pentru a încuraja interacțiunea, site-ul web Walking Dead folosește ceva diferit - derularea duce utilizatorul prin ecrane orizontale în stil benzi desenate.

3. Mișcare și culoare

Una dintre cele mai interesante moduri de a folosi efectele de paralaxă este utilizarea culorii în diferite „panouri” de conținut. Schimbările de culoare și animația pot exprima ceva nou. In plus, culoarea atrage foarte bine atentia utilizatorilor.

Site-ul web Werkstatt folosește alb și culorile gri pentru designul principal și straturi de paralaxă între elemente și text, iar trecerea mouse-ului aduce viață și culoare fiecărui design.

4. Îmbunătățirea absorbției informațiilor

Efectele de paralaxă pot ajuta la înțelegerea mai ușor a informațiilor complexe sau la îmbunătățirea lizibilității blocurilor mari de text. Exemplele de mai sus arată două exemple diferite ale acestui concept.

Pagina „despre” a site-ului Melanie David are o introducere lungă, dar elementul de navigare „Despre” din stânga nu se mișcă pe măsură ce textul derulează. Când textul se termină, ambele părți ale paginii se mută la o nouă secțiune. Aceasta este o soluție excelentă pentru cazurile în care un bloc de text este mai lung decât secțiunea vizibilă a conținutului.

Restaurantul Le Duc folosește blocuri separate pentru fiecare secțiune a meniului. Animația este destul de simplă și ajută la înțelegerea mai bună a informațiilor.

5. Vizualizați realitatea digitală

Unul dintre cele mai bune moduri Scopul efectelor de paralaxă este de a ajuta utilizatorul să vizualizeze ceea ce nu poate vedea. Designerii folosesc din ce în ce mai mult o combinație de animație 3D și paralaxă pentru a crea experiențe mai realiste.

Unul dintre exemplele clasice de site care utilizează animație paralaxă este site-ul Seattle Space Needle. Ei folosesc derularea în sus pentru a arăta vizitatorului cum va arăta orașul din vedere de ochi de pasăre.

Derularea Parallax te mută în sus în clădire, afișând mesaje CTA și o bară de navigare excelentă care afișează elevația. Acest design arată utilizatorului ceva ce ar fi dificil de imaginat fără utilizarea efectelor animate.

Concluzie

Deși efectele de paralaxă sunt la modă și interesante, nu sunt potrivite pentru toate proiectele. De asemenea, este important să rețineți că unor utilizatori le va fi dificil să navigheze pe un site care conține atât de multă animație.

Înainte de a utiliza efectele de paralaxă, cunoaște-ți utilizatorii și preferințele acestora. Începeți cu pagina de pornire și uitați-vă la analize - totul funcționează așa cum ar trebui (creșterea timpului petrecut pe site va deveni semn bun că totul funcționează).

Folosește paralaxa atunci când funcționează bine cu conținutul tău.

Traducerea articolului de Carrie Cousins

În mișcare, paralaxa înseamnă o schimbare a locației unui obiect pe un fundal în raport cu un observator care este pe loc. Acest termen a câștigat popularitate pe internet. În special, un site web cu elemente dinamice în design pare interesant. Parallax este o modalitate de proiectare a unei pagini pe Internet, folosită de webmasteri pentru a atrage un număr mare de vizitatori.

Cum este paralaxa?

Defilarea Parallax poate fi utilizată atât pe verticală, cât și în linie dreaptă. Cel mai bun exemplu este Nintendo. Mulți dintre noi își amintesc cu nostalgie jocuri pe calculator, reprezentată de mișcarea personajelor principale din partea stângă a ecranului spre dreapta. De asemenea, este posibil să vă deplasați în jos de-a lungul unei linii drepte verticale. folosit adesea pe web. Pentru a crea un glisor vertical, puteți utiliza JavaScript sau CSS 3.

Ele sunt caracterizate prin efectul spațial tridimensional descris. Creatorii jocului au folosit mai multe straturi de fundal. Ele diferă ca textură, în timp ce mișcarea se realizează cu la viteze diferite.

Să nu credeți că paralaxa este doar despre crearea unui efect 3D. Puteți muta pictogramele existente pe pagină. În plus, arată destul de atractiv. O opțiune deosebit de bună este să folosiți o traiectorie individuală pentru fiecare dintre ele. În acest caz, sunt utilizate diferite pictograme, deplasându-se de-a lungul diferitelor traiectorii. Acest design atrage atenția.

Imagine care prind viață

Este greu să găsești un site fără imagini. Desenele de înaltă calitate și demonstrative atrag vizitatorii. Dar cea mai mare atenție este atrasă asupra diferitelor tipuri de imagini dinamice. Într-adevăr, dacă există mișcare la vizitarea unui site, aceasta atrage atenția. Probabilitatea ca un vizitator resursă să revină la o imagine dinamică crește semnificativ. Părea că se mișcă sau nu? Prin urmare, pentru a atrage vizitatori pe site, merită să studiați un astfel de concept precum efectul de paralaxă.

Exemple de site-uri cu imagini în mișcare:

  • hvorostovsky.com;
  • www.kagisointeractive.com.

După cum se arată în exemple, percepția este îmbunătățită de un meniu care se derulează în sub-articole. Acest element economisește timp pentru vizitatori și, prin urmare, este atractiv pentru aceștia.

biblioteca jQuery

Termenul jQueryParallax definește biblioteca cu același nume. Datorită acesteia, este ușor de realizat efectul de mișcare în format 3D. ÎN biblioteca jQuery este creată percepția tridimensională căi diferite. Una dintre ele este de a muta obiectele de fundal pe orizontală, în același timp, la viteze diferite. Această bibliotecă se caracterizează prin prezența unui număr mare de diferite tipuri de proprietăți. Și deplasarea descrisă aici este doar o mică parte capacitățile sale.

Site-ul arată destul de atractiv, pentru crearea căruia diverse elemente moderne. Una dintre ele este paralaxa. Exemple de site-uri ar putea arăta astfel:

  • www.grabandgo.pt;
  • www.fishy.com.br;
  • www.noleath.com;
  • buysellwebsite.com.

jParallax este reprezentat de straturi care se mișcă cu mișcarea mouse-ului. Elementele dinamice se caracterizează prin absolut ;). Fiecare dintre ele se caracterizează prin propria dimensiune și mișcare la o viteză individuală. Acesta poate fi text sau o imagine (la cererea creatorilor de resurse).

Percepția vizitatorilor site-ului

După aceasta, o persoană acordă de obicei atenție faptului că pagina este proiectată eficient, convenabil și competent. Acest fapt impune de obicei respect. Uneori apare curiozitatea de a încerca alte elemente. Disponibil pe Internet o cantitate mare site-uri identice. Cum să-ți faci resursa specială?

Dacă vă place designul, vizitatorul va rămâne o perioadă mai lungă. Astfel, probabilitatea ca el să fie atras de informațiile postate crește și va manifesta interes. Ca urmare, persoana respectivă va profita de serviciul, produsul sau oferta promoțională oferită.

Jocuri vechi preferate

Conceptul de „paralaxă” ar trebui să fie familiar tuturor fanilor consolelor anilor 80 și 90. Acest lucru este valabil pentru jocuri:

  • Fratii Mario.
  • Bătaia mortală.
  • Străzile furiei.
  • Patrula Lunii.
  • Țestoasele în timp.

    • Adică paralaxa este o tehnică care a fost folosită pentru o perioadă destul de lungă. Aceste jocuri sunt într-adevăr amintite cu o oarecare nostalgie. La urma urmei, par a fi impregnate de caracterul acelei perioade.

    Imaginile de pe ecran sunt create folosind o tehnică numită paralax scrolling. Nu este de mirare că această tehnică a câștigat o popularitate binemeritată. Acest concept de design este perceput cu căldură de cei care au jucat în anii 80-90 sau au urmărit timpul liber al prietenilor.

    Defilare paralaxă

    Agenții de marketing ai mărcilor de top din lume folosesc de multă vreme diverse tipuri de progrese tehnice. Astfel, devine posibil să interesezi chiar și un vizitator ocazional al site-ului.

    Defilarea Parallax a fost folosită cu destul de mult succes de către Nike. Site-ul web original al companiei a fost dezvoltat de designerii Weiden și Kennedy. Dar acest design nu a fost păstrat. Resursa a fost actualizată treptat în conformitate cu tendințele moderne. Activatedrinks.com este un exemplu de site al cărui design amintește de designul folosit de marketerii Nike din această perioadă.

    Nu ar trebui să existe prea multă dinamică

    Nu uitați că designul site-ului este adesea criteriul cheie care ghidează vizitatorul. O resursă prost executată lasă utilizatorului de obicei impresia că firma proprietară nu este serioasă. Dar un site web cu diverse tipuri de elemente de design atractive indică dorința proprietarilor organizației de a interesa vizitatorii.

    Aici merită să ne amintim despre paralaxă. Acesta este un instrument minunat. Dar nici măcar ei nu ar trebui să se lase prea duși de cap. Pentru că pagina pe care se află un numar mare de diferite tipuri de elemente în mișcare, destul de greu de înțeles. Cel mai bine este să faceți designul moderat elegant și ușor de înțeles.

    Elementele individuale care necesită evidențiere ar trebui să fie dinamice. De asemenea, poate exista un desen care este creat folosind straturi care se deplasează unul față de celălalt. Nu uitați că un site web personalizat este conceput în primul rând pentru vizitatori. Nu ar trebui să fie o capodopera a unui webmaster care și-a investit toate cunoștințele. La urma urmei, o astfel de abordare nu va face decât să complice percepția.

    Cum se creează o mișcare pe site

    Cum se face paralaxa? Această întrebare interesează mulți creatori de site-uri web. Nu este necesar să cunoașteți complexitatea scrierii etichetelor. Foarte comod de utilizat resurse specialeîn internet. Din un numar mare Propunerile disponibile includ următorii asistenți:

  • Plax este un program destul de ușor de utilizat. Tinde să dea mișcarea paginii prin mișcarea mouse-ului.
  • jQuery Parallax Image Slider - plugin jQuery folosit pentru a crea glisoare de imagine.
  • Jquery Image Parallax - potrivit pentru decorare desene transparente. Prin utilizarea PNG-ului, GIF-urile câștigă profunzime în timp ce sunt aduse la viață prin mișcare.
  • Curtain.js este folosit pentru a crea o pagină echipată cu panouri fixe. În acest caz, se observă efectul deschiderii perdelelor.
  • Paralaxul derulant: A Pluginul jQuery constă în crearea unui efect de paralaxă la derularea rotiței mouse-ului.

    • Câteva plugin-uri mai utile

    După cum știți, informațiile au cea mai mare valoare. Si ce cantitate mare modalitățile de a realiza ceea ce îți dorești sunt cunoscute, cu atât probabilitatea de a obține este mai apropiată rezultat corect. Pluginuri utile folosite pentru a crea dinamica:

  • jQuery Scroll Path - folosit pentru a plasa obiecte pe o cale specificată.
  • Scrollorama este un plugin jQuery. Este folosit ca instrument pentru un design atractiv al materialului. Datorită defilării convenabile, vă permite să „reviați” textul de pe pagină.
  • Scrolldeck este un plugin jQuery. Este o soluție excelentă folosită ca prezentare pentru site-urile web concepute ca o singură pagină.
  • jParallax reprezintă mișcarea straturilor în funcție de mișcarea indicatorului mouse-ului.
  • Stellar.js este un plugin cu care orice element este proiectat cu adăugarea unui efect de defilare paralaxă.

    • Paralaxă cu fixarea cursorului

    Această paralaxă arată destul de impresionantă. Obiectele de pe pagina unui site care par nemișcate la prima vedere se mișcă atunci când sunt abordate. Pare că prind viață și urmăresc elementul mutat.

    Mai întâi ar trebui să te oprești la desen. Imagine necesară plasat într-un cadru, în timp ce marginile acestuia trebuie ascunse. Metoda este foarte simplă, iar desenul rezultat pare destul de atractiv.

    Efectul de paralaxă pentru un site web este o metodă de design minunată. Utilizarea acestuia indică faptul că s-a acordat atenția cuvenită creării resursei. Prin urmare, merită să acordați atenție serviciilor oferite sau informațiilor de citit. Astfel de site-uri par mai avantajoase pe fondul unor resurse identice, dar concepute simplu.

    Salutare tuturor, astăzi vom analiza un bonus foarte interesant pentru site - efectul de paralaxă. Când este folosit cu înțelepciune, poate adăuga profunzime și sofisticare site-ului sau aplicației dvs.

    Dar există o problemă - a face paralaxă fără frâne și poate deveni zvâcnire sarcina dificila pentru un webmaster începător (și nu atât de începător).

    În acest articol vom discuta despre soluții care au performanțe bune, iar acest lucru este foarte important pentru un site web sau aplicație frumos și informativ.

    În primul rând, să notăm câteva puncte importante:

    • Nu utilizați evenimente de defilare sau de poziție de fundal pentru a crea animații de paralaxă.
    • Utilizați transformări CSS 3D pentru a crea un efect de paralaxă mai precis.
    • Pentru mobil browser Safari poziția de utilizare: lipicioasă pentru a asigura multiplicarea efectului de paralaxă.

    Puteți merge la depozitul Github - exemple de elemente de UI și puteți scoate ajutorul Parallax JS de acolo! Puteți urmări o demonstrație live a derulării paralaxei în depozitul Github.

    Probleme de paralaxă

    În primul rând, să ne uităm la cele 2 modalități principale de a obține efectul de paralaxă și, în special, de ce nu sunt potrivite pentru scopurile noastre.

    Prost: se utilizează evenimente de defilare

    Cerința cheie pentru paralaxă este ca aceasta să fie dependentă de derulare. De fiecare dată când scroll-ul este derulat, poziția elementelor de paralaxă ar trebui actualizată. Deși sună simplu, este un mecanism important browsere moderne este capacitatea lor de a lucra asincron. În cazul nostru specific, aceasta se referă la evenimentul de defilare.

    Multe browsere oferă evenimente de defilare De calitate inferioarăși nu există nicio garanție de a le livra la fiecare cadru al animației de defilare!

    Această bucată Informații importante ne spune de ce ar trebui să evităm soluțiile JavaScript care mută elemente pe baza evenimentelor de defilare:

    Javascript nu garantează că paralaxul va ține pasul cu derularea paginii. În versiunile mai vechi de Safari mobil, evenimentele de defilare au fost furnizate de fapt către sfârșitul derulării, făcând imposibilă efectuarea efectelor de defilare bazate pe Javascript.

    Majoritate ultimele versiuni furnizarea de evenimente de defilare în timpul animațiilor de defilare, dar similar cu Chrome, se bazează pe o calitate scăzută. Dacă firul principal este ocupat cu alte sarcini, evenimentele de defilare nu vor fi livrate imediat, ceea ce înseamnă că efectul de paralaxă se va pierde.

    Prost: se actualizează poziția de fundal

    O altă situație pe care trebuie să o evităm este redarea fiecărui cadru. Multe soluții încearcă să schimbe poziția de fundal pentru a oferi un aspect de paralaxă, ceea ce duce la redesenarea părților rupte ale paginii la defilare și acest lucru poate duce la animație inutilă.

    Dacă vrem să ne îndeplinim promisiunea mișcării paralaxei, avem nevoie de ceva care să poată fi aplicat ca un accelerator (ceea ce astăzi înseamnă să rămânem cu transformări și opacitate) și care să nu se bazeze pe evenimente de defilare.

    3D în CSS

    Scott Kellum și Keith Clark au făcut o muncă semnificativă în zonă folosind CSS 3D pentru a obține mișcarea de paralaxă. Ei folosesc eficient următoarea tehnică:

    • Setați scroll la conținutul elementului cu overflow-y: scroll (și probabil overflow-x: hidden).
    • Adăugați o valoare de perspectivă la același element și setați perspectiva-origina în stânga sus sau 0 0 .
    • Descendenții acelui element au o deplasare în Z aplicată și scalate înapoi, astfel încât mișcarea de paralaxă să nu afecteze dimensiunea lor pe ecran.

    CSS-ul pentru această abordare arată astfel:

    css Setarea scalei pentru perspectiva

    Schimb element copil spatele poate determina o scădere proporțională cu valoarea perspectivei. Puteți calcula la ce valoare să scalați folosind următoarea ecuație: (perspectivă - distanță) / perspectivă. Deoarece cel mai probabil vrem să mutăm elementul, dar când apare în dimensiunea în care l-am specificat, trebuie să fie scalat pentru a nu-l muta spre stânga.

    În cazul nostru, în codul de mai sus, perspectiva este de 1 px, distanța Z paralaxă-copil este -2px. Aceasta înseamnă că elementul trebuie să fie scalat de 3x, în cod puteți vedea aceasta ca următoarea scară de intrare (3).

    Pentru orice conținut care nu are o valoare translateZ setată, îl puteți înlocui cu 0. Aceasta înseamnă că scara va fi (perspectivă - 0) / perspectivă, căruia i se dă o grilă de valoare 1, ceea ce înseamnă că este imposibil nici să măriți. înăuntru sau afară. Chiar convenabil.

    Cum funcționează această abordare

    Este important să fie clar de ce funcționează acest lucru, deoarece vom folosi aceste cunoștințe în viitorul apropiat. Derularea este de fapt o transformare, motiv pentru care poate fi accelerată; Acest lucru implică, practic, schimbarea straturilor în jurul utilizării GPU-ului. Într-un derulare tipic, care nu are sens de perspectivă, defilarea are loc într-un raport de 1 la 1 când se compară elementele fixate și descendenții acestora. Dacă derulați elementele cu 300 px în jos, strămoșii sunt transformați în partea de sus cu aceiași 300 px.

    Cu toate acestea, aplicarea unei valori de perspectivă elementelor care pot fi derulate încurcă acest proces; aceasta schimbă matricea care stă la baza transformării scroll. În prezent, derularea cu 300px poate muta copilul cu 150px, în funcție de perspectivă și de valorile translateZ pe care le alegeți. Dacă un element are o valoare translateZ de 0, acesta va derula la o scară de la 1 la 1 (ca înainte), dar copilul împins de-a lungul axei Z din perspectiva inițială va derula cu o viteză diferită. Rezultatul net: mișcarea de paralaxă. Și ceea ce este foarte important, această ajustare are loc automat prin mecanismul intern al browserelor, ceea ce înseamnă că nu este nevoie să ascultați evenimentele de defilare sau să schimbați poziția de fundal.

    Zboară în unguent: Safari mobil

    Există multe avertismente pentru fiecare efect, iar unul important cu transformări este păstrarea efectelor 3D pentru posteritate. Dacă există elemente în ierarhia dintre element și copilul său paralax, perspectiva 3D este setată la „aplatizată”, ceea ce înseamnă că efectul este pierdut.

    html

    Cu toate acestea, în cazul Safari mobil, lucrurile sunt puțin mai confuze. Aplicarea overflow-y: derularea la un element container funcționează din punct de vedere tehnic, dar cu prețul răsturnării elementelor derulabile. Soluția ar fi să adăugați -webkit-overflow-scrolling: touch , dar va netezi și perspectiva și nu vom obține nicio paralaxă.

    Din punct de vedere progresiv, nu este așa o problema mare. Dacă nu putem realiza paralaxa în nicio situație, aplicația noastră va funcționa în continuare, dar ar fi o idee bună să găsim o soluție.

    ÎN poziție de ajutor:lipicios!

    Există de fapt ceva ajutor sub formă de poziție: lipicios, acesta este necesar pentru a face elementele să se „lipească” de partea de sus a ferestrei de vizualizare sau pentru a respecta elementul părinte în timpul derulării. Specificația, ca multe dintre ele, este destul de mare, dar conține o mică bijuterie utilă:

    Un bloc poziționat cu stick este poziționat în mod similar cu un bloc poziționat relativ, dar decalajul este calculat prin referire la cel mai apropiat strămoș cu un glisor de defilare sau o fereastră de vizualizare dacă nu există niciun strămoș cu un glisor de derulare. - Modulul de aspect poziționat CSS Nivelul 3.

    Acest lucru poate să nu pară atât de semnificativ la prima vedere, dar moment cheieîn acea expresie în modul în care este calculat parametrul elementului stick: „offset-ul este calculat cu referire la cel mai apropiat strămoș al glisorului de defilare”. Cu alte cuvinte, distanța de mișcare a elementelor setate să se lipească (pentru a părea lipite de alt element sau de partea vizibilă a ecranului) este calculată înainte de aplicarea oricăror alte transformări, nu după. Aceasta înseamnă, foarte similar cu exemplul dat mai devreme, dacă offset-ul a fost calculat la 300px, acest noua oportunitate folosind valori de perspectivă (sau alte transformări) pentru a afecta valoarea de mișcare cu 300px înainte de a fi aplicată oricărui element cu o valoare stick.

    Folosind poziția: -webkit-sticky pe un element de paralaxă, putem obține de fapt „opusul” efectului -webkit-overflow-scrolling: touch. Acest lucru asigură că elementul de paralaxă face referire la cel mai apropiat strămoș cu glisorul de defilare, în în acest caz, acest.container . În continuare, la fel ca înainte, adăugăm valoarea perspectivei la .parallax-container, care modifică mișcarea de derulare calculată și creează un efect de paralaxă.

    html

    css

    Container (

    overflow-y : scroll;

    Webkit-overflow-scrolling: atingere;

    Recipient-paralax (

    perspectiva: 1px;

    Paralax-copil (

    pozitia : -webkit-sticky;

    sus: 0px;

    transform : translate (-2px) scară (3);

    Acest lucru restabilește efectul de paralaxă pentru Safari mobil, ceea ce este o veste excelentă pentru toată lumea!

    Precauții pentru poziționarea lipicioasă

    Cu toate acestea, există o diferență: poziție: sticky modifică mecanismul de paralaxă. Poziționarea lipicioasă încearcă să lipească complet elementul de containerul derulabil, în timp ce versiunea non-lipioasă nu face acest lucru.

    • Cu poziție: sticky , cu cât elementul este mai aproape de z = 0, cu atât se mișcă mai puțin.
    • Fără poziție: sticky , cu cât un element este mai aproape de z = 0, cu atât se mișcă mai mult.

    Dacă totul pare puțin abstract, consultați demonstrația lui Robert Flack, care demonstrează diferența de comportament dintre elementele cu și fără poziționare lipicioasă. Ca să vezi diferența de care ai nevoie Chrome Canary(versiunea 58 la momentul scrierii) sau Safari.

    Demo-ul lui Robert Flack arată cum poziția: sticky afectează derularea paralaxă.

    Diferite erori și modalități de a le rezolva

    Ca întotdeauna, există denivelări și nereguli care trebuie netezite:

    • Suportul pentru sticky este inconsecvent. Suportul este implementat în Chrome, Edge nu acceptă pe deplin și FireFox are erori de randare când partajarea lipicios și transformă: perspectivă. În astfel de cazuri, merită adăugat cod mic doar pentru a include poziția: sticky (cu prefixul -webkit-) atunci când este necesar, acest lucru este necesar doar pentru Safari mobil.
    • Acest efect nu funcționează deloc în Edge. Edge încearcă să se ocupe de defilarea la nivelul sistemului de operare, ceea ce este practic un lucru bun, dar în acest caz împiedică detectarea schimbărilor de perspectivă în timpul derulării. Pentru a remedia acest lucru, puteți adăuga un element cu poziționare fixă, cum arată în tranziția Edge către o metodă de procesare bare-metal, asigurându-se că schimbările viitoare sunt luate în considerare.
    • Conținutul paginii este pur și simplu uriaș! Multe browsere nu iau în considerare scara atunci când decid cât de mult conținut grozav pagini, dar, din păcate, Chrome și Safari nu țin cont de perspectiva. Deci, dacă spunem că aplicăm o scară 3X unui element, putem vedea bare de defilare și altele, chiar și la o scară 1X după aplicarea perspectivei. Este posibil să ocoliți această problemă prin scalarea elementelor în raport cu colțul din dreapta jos (transform-origin: dreapta-jos). Acest lucru funcționează determinând elementele supradimensionate să crească în „zone negative” (de obicei în partea dreaptă sus) în raport cu zona afumată; Zonele care pot fi derulate nu vor afișa sau derula niciodată conținutul către zona negativă.
    Concluzie

    Paralaxa este un efect distractiv dacă este folosit cu grijă. După cum puteți vedea, acest lucru poate fi implementat în așa fel încât să fie productiv, dependent de derulare și încrucișat. Pentru că acest lucru necesită puțină lăutari la matematică și, de asemenea, un mic șablon pentru a obține efectul dorit, vom include o mică bibliotecă de ajutor și un eșantion, pe care le puteți găsi în depozitul nostru GitHub - Exemple de elemente UI.

    Original: https://developers.google.com/web/updates/2016/12/performant-parallaxing