Implementarea efectului de parallax asupra CSS elimină toate aceste probleme și permite browserului să utilizeze accelerația hardware. Rezultatul este în concordanță cu rata cadrelor și derularea este netedă. Puteți, de asemenea, combina efectul cu alte caracteristici CSS, cum ar fi interogările sau suportele media - și obțineți paralaxă adaptivă.
Înainte de a intra în efectul efectului, să creăm un fel de marcaj de tip wireframe.
Și adăugați stilurile:
Clasa paralaxelor este locul unde se va produce magia. Am definit proprietățile de înălțime și perspectivă pentru această clasă, creând astfel un efect de adâncime. Proprietatea de overflow-y: auto vă permite să parcurgeți conținutul în interiorul unui element în modul obișnuit, dar acum elementele imbricate vor fi trase într-o perspectivă fixă. În acest moment cheie în crearea efectului paralaxei.
Apoi, ia în considerare clasa parallax__layer. După cum sugerează și numele, această clasă va defini un strat pentru elementele la care se va aplica efectul de parallax. Acest element este poziționat absolut și ocupă întregul container.
Pentru simplitate, am adăugat doar două straturi cu viteze diferite - vom adăuga mai mult.
Corecție adâncime
Deoarece paralaxa este creată folosind transformări 3D, deplasarea unui element de-a lungul axei Z are un efect secundar - mutarea elementului mai aproape sau modificarea dimensiunii acestuia. Pentru a rezolva acest lucru, trebuie să aplicăm transformarea scalei () la element, apoi va fi redată în dimensiunea originală:
Factorul de scalare poate fi calculat folosind formula 1 + (translateZ * -1) / perspectivă. De exemplu, dacă proprietatea perspectivă este 1px și elementul este mutat la -2px, factorul de scalare este de 3:
Controlul vitezei stratului
Viteza stratului este controlată de o combinație a valorii de perspectivă și a deplasării de-a lungul axei Z. Elementele cu valori de deplasare negative se mișcă mai lent decât cu valori pozitive. Cu cât este mai mare valoarea de la 0, cu atât este mai pronunțat efectul de parallax (adică elementul cu translateZ (-10px) se va mișca mai lent decât cu translateZ (-1px)).
Subsecțiunile cu parallax
Exemplele anterioare arată tehnica de bază a creării de parallax cu conținut foarte simplu. Dar majoritatea site-urilor cu parallax sunt împărțite în secțiuni, fiecare dintre ele aplicând acest efect independent. Să ne uităm cum să procedăm.
Mai întâi, avem nevoie de un element parallax_group, în care grupăm straturile:
Stiluri CSS pentru acest articol:
În acest exemplu, vreau ca fiecare grup să populeze fereastra de vizualizare, așadar am setat înălțimea la 100vh, dar fiecare grup poate avea propriile valori, dacă este necesar. Proprietatea în stil transformat: preserve-3d previne alinierea copiilor într-un singur avion, iar poziția: proprietatea relativă vă permite să poziționați absolut copiii în legătură cu aceasta.
Când grupăm elementele, trebuie reținută o regulă importantă, nu putem tăia conținutul grupului. Setarea depășirii: ascunsă pentru elementul parallax__group va întrerupe efectul de parallax. Aceasta conduce la faptul că elementele copilului pot depăși granițele containerului, deci este necesar să aranjăm corect valorile indexului z în grupuri, astfel încât conținutul să fie corect afișat / ascuns când pagina este derulată.
Nu există reguli clare pentru combaterea stratificării elementelor, deoarece Implementarea specifică va depinde de proiectare. Depistarea de depanare este mult mai ușoară dacă puteți vedea cum funcționează paralaxa - puteți aplica o transformare simplă într-un grup de elemente:
Uitați-vă la următorul exemplu și nu uitați să verificați opțiunea de depanare!
Suport pentru browser
- Firefox, Safari, Opera și Chrome suportă acest efect.
- În Firefox există o ușoară problemă de aliniere.
- IE nu susține încă proprietatea conservare-3d, astfel încât efectul parallaxului nu va funcționa. Acest lucru este normal, dar tot trebuie să vă asigurați că conținutul este afișat corect fără parallax - bine, știi, îmbunătățirea progresivă și toate acestea!
Ați găsit o greșeală? Orphus: Ctrl + Enter
Articole similare
Trimiteți-le prietenilor: