10 fragmente CSS și JavaScript pentru crearea efectului de defilare Parallax

Există multă confuzie cu privire la designul paralax și la modul în care funcționează pe web. În general, designul de paralaxă folosește mișcarea pentru a crea iluzia de profunzime pe o pagină.

Acest lucru se poate referi la modificări de fundal sau elemente de poziție semi-fixă care se deplasează alături de derularea utilizatorului. Am acoperit multe exemple de pe site-uri web, dar nu am intrat în detalii despre tehnicile implicate.

Pentru această colecție, am ales fragmentele mele preferate CSS și JavaScript pentru a crea layout-uri paralax. Toate exemplele oferă cod sursă gratuit, astfel încât să vă puteți juca cu fragmente și chiar să le utilizați în propriile proiecte.

1. Marea cădere de CJ Gammon

Acest exemplu de paralaxă este una dintre cele mai unice interfețe pe care le-am găsit vreodată. Utilizează un script personalizat pentru a crea un sprite în cascadă care pare să curgă la nesfârșit pe pagină. A fost construit pe elemente canvas controlate prin JavaScript, deci este o configurație destul de tehnică.

În cea mai mare parte, acesta este o dovadă a ceea ce este posibil în dezvoltarea web modernă. Învățarea elementului de pânză vă oferă mult control asupra designului dvs.

Vedeți Pen The Great Fall de CJ Gammon

2. CSS Scrolling Parallax de Sebastian Schepis

Iată un efect de paralaxă mai practic, cu un fundal fix și pagini mai mari deasupra. Când derulați, fiecare secțiune de pagină apare deasupra fundalului. Acest lucru creează iluzia de adâncime și este unul dintre elementele cheie pentru un design excelent de paralaxă.

Dezvoltatorul Sebastian Schepis a folosit doar CSS pentru această pagină și este un concept destul de simplu. Cred că oricine ar putea clona acest lucru cu ușurință, ca să nu mai vorbim de designul de fundal ar putea fi mult îmbunătățit.

Vedeți Efectul de paralaxă de derulare a creionului CSS de Sebastian Schepis

3. Simple Image Tag Parallax de Renan Breno

Veți găsi adesea modele de paralax cuplate cu imagini de fundal mari pe ecran complet. Acestea sunt prea frecvente pe site-urile companiei și pe startup-uri, unde de obicei prezintă o anumită „viteză de defilare” paralaxă pentru fundal.

Diferența aici nu constă atât în ​​cât de rapid derulați în jos pe pagină sau cât de mare este plasarea imaginii. În schimb, vedeți cât de repede se mișcă imaginea prin fundalul paginii în timp ce derulați. Este un efect de paralaxă subtil, dar acest aspect este un șablon excelent pentru a vedea diferitele viteze de animație în acțiune.

Vedeți Pen Simple Image Tag Parallax de Renan Breno

4. Paralaxă și fundaluri cu imagini fixe

Fundalurile de imagini fixe funcționează bine pentru a împărți paginile și a împărți uniform secțiunile de conținut. Pe măsură ce derulați, se poate simți că secțiunile individuale ale paginii sunt mai înalte decât imaginile de fundal. Toate acestea sunt concepute pentru a da viață efectului de paralaxă în timpul derulării.

Nu aș folosi acest aspect exact, deoarece zonele de conținut par puțin subțiri. Dar dacă vă place acest stil, vă recomand să punctați fiecare secțiune a paginii cu o imagine diferită relevantă pentru site-ul dvs.

Vedeți Pen #Maincode Hackdays de chaobu

5. CSS Parallax de Paulo Cunha

Acest exemplu de paralaxă este un exemplu unic al modului în care funcționează efectele de paralaxă. Tot conținutul paginii se află sub o imagine mare de erou, care dispare sub conținutul de pe defilare. Acest lucru folosește, de asemenea, poziția fixă ​​a imaginii pentru a face să pară ca și cum pagina se mișcă peste imagine, mai degrabă decât imaginea să rămână fixă ​​pe loc.

Puteți utiliza același efect cu un aspect de derulare lung și ar avea un stil de design similar. Acest lucru ar funcționa cel mai bine pentru postări unice de blog cu imagini prezentate mari sau pagini de destinație care folosesc eroi mari pentru a atrage atenția.

Vedeți Pen CSS Parallax de Paulo Cunha

6. Parallax Design de Katie Rogers

Iată un design interesant de paralaxă pentru un exemplu de pagină de nuntă. Are un design de pagină împărțită în care imaginile separă numeroasele zone de conținut diferite cu defilare fixă ​​paralaxă. Totul rulează pe CSS, ceea ce este o atingere plăcută, iar toate imaginile de fundal rămân fixe în timp ce se deplasează în jos pe pagină.

Acest efect funcționează deoarece zonele de conținut au umbre de casete mari care cad peste fundal. Desigur, acest lucru creează iluzia de profunzime, oferind paginii o sursă de lumină teoretică și o ierarhie - o idee foarte bună pentru un aspect cu o singură pagină.

Vedeți designul Pen Parallax de Katie Rogers

7. Derularea imaginii de fundal Parallax de Rich Howell

Mai devreme, am menționat cum viteza de derulare poate varia în funcție de rata de schimbare a poziției de fundal. Acest exemplu este comparația perfectă pentru a vedea cum funcționează acest lucru în acțiune.

Rețineți că va trebui să utilizați bara de derulare pentru a vedea efectele acestui exemplu. Am încercat cu rotița mouse-ului și nu am putut vedea nicio diferență, dar veți observa schimbări de viteză între coloane când mutați bara de defilare.

Niciuna dintre aceste viteze nu este reprezentări greșite sau inexacte ale designului paralaxului. Sunt doar metode diferite de a crea mișcare pe pagină, iar acest mic exemplu este o modalitate excelentă de a vizualiza multe opțiuni.

Vedeți Pen Scrolling Background-Image Paralax de Rich Howell

8. Fundalul Starry Parallax de Saransh Sinha

Deși acest efect nu este legat de defilare, el are legătură directă cu designul de paralaxă. Folosește CSS pur pentru a crea o animație stea paralaxă în fundalul paginii. Puteți adăuga text și chiar o zonă de conținut peste pagină, dar stelele creează imediat profunzime la prima vedere.

Animația rulează prin CSS, dar acest fragment folosește Sass și Compass, așa că ar fi util să înțelegeți înainte de a face modificări.

Vedeți fundalul Pen Parallax Star în CSS de Saransh Sinha

9. Canvas Parallax Skyline de Jack Rugile

Uneori, modelele de paralaxă vizează și mișcarea mouse-ului împreună cu funcțiile de defilare. Acest design de pânză creează un efect de orizont nesfârșit care reacționează la mișcarea mouse-ului pe pagină. Pe măsură ce repoziționați mouse-ul, unghiul de vizualizare se modifică. Dar animația rămâne aceeași și puteți vedea acest orizont mișcându-se cu o ierarhie vizuală clară.

Desigur, acest lucru necesită JavaScript pentru animație, deoarece este o idee destul de complexă. Dar nici nu este ceva ce veți găsi pe multe site-uri web, așa că nu este ceva ce veți copia nici pe site-ul dvs. Dar ca concept de paralaxă, acesta este cu adevărat interesant.

Vedeți Pen Canvas Parallax Skyline de Jack Rugile

10. Filtru de sticlă spartă de Bajjy Xilo

Am mai văzut acest efect pe site-uri web, creând un design foarte ciudat. Filtrul de sticlă spart dă iluzia că o imagine de fundal este împărțită în mai multe părți diferite. Aproape că se pare că imaginea ar fi fost pe un geam de sticlă și s-a spulberat, fracturând imaginea și înclinând imaginea.

Puteți reproduce acest efect cu CSS pur și este unul dintre acele efecte îngrijite care este grozav de făcut, dar care poate să nu aibă nicio utilizare practică, în lumea reală, în afară de design-uri fanteziste. Totuși, acesta este un exemplu impresionant de adâncime a paralaxei și mișcare în timpul derulării.

Vezi filtrul css BrokenGlass de la Bajjy Xilo