Creați o imagine interactivă de paralaxă
Defilare în paralel nu mai este captorul de atenție garantat, dar există și alte modalități de a utiliza tehnici de paralaxă pentru a atrage vizitatorii și a vă îmbunătăți experiența utilizatorului .
Aruncăm o privire la Site-ul domnului Fisk , proiectat de BMO și veți observa un tip diferit de paralaxă: imaginea sa principală colorată se mișcă în 3D, ca răspuns la mișcările mouse-ului.
Este un efect impresionant, care nu este prea greu de implementat; pur și simplu urmați acești pași pentru a oferi site-ului dvs. un sentiment de profunzime atrăgător.
01. Lansați HTML
Primul pas este de a defini documentul HTML, care constă din containerul HTML pentru stocarea secțiunilor cap și corp. În timp ce secțiunea principală este în primul rând responsabilă pentru încărcarea resurselor CSS și JavaScript externe, secțiunea corp va stoca elementele de conținut care vor fi create la pasul 02.
Mouse Scroll *** STEP 2 HERE 02. Elemente de conținut
Tehnica va permite oricărui container de conținut care utilizează atributul data-parallax să afișeze efectul. Fiecare element copil de primul nivel se va afișa odată cu prezentarea de paralaxă. Acest exemplu setează trei straturi copil pentru paralaxă, dar puteți adăuga mai multe dacă doriți. De asemenea, puteți adăuga conținut la aceste straturi, cum ar fi text sau imagini; PNG sau SVG cu transparență vor funcționa cel mai bine.
03. Stilul containerului Parallax
Creați un fișier nou numit „styles.css”. Primul set de reguli din acest fișier stabilește dimensiunea implicită a containerului de paralaxă și modul său de poziție. Este important să utilizați poziționarea relativă, astfel încât elementele copil să poată fi plasate în raport cu oriunde este amplasat containerul. Lățimea și înălțimea sunt setate pentru a acoperi ecranul complet pentru a permite o interactivitate maximă.
[data-parallax]{ position: relative; width: 100vw; height: 100vh; }04. Copii paralaxi
Fiecare dintre elementele de primul nivel din interiorul containerului de paralaxă de date sunt dimensionate și poziționate pentru a apărea central. Împreună cu poziționarea relativă a părinților, procentul este folosit ca unitate de măsură, permițând dimensionarea și poziționarea să fie plasate în raport cu containerul de paralaxă. Pentru acest exemplu, un fundal roșu transparent este folosit pentru a demonstra efectul - puteți înlocui acest lucru cu imaginea PNG sau SVG la alegere folosind @background: url („imaginea dvs. aici”).
[data-parallax] > *{ position: absolute; width: 50%; height: 50%; left: 25%; top: 25%; border: 1px solid #000; background: rgba(255,0,0,.25) }05. Lansați JavaScript
Creați un fișier nou numit „code.js”. JavaScript va fi utilizat pentru a controla răspunsurile la interacțiunile mouse-ului utilizatorului. Nu vrem ca JavaScript să ruleze niciunul dintre codurile JavaScript până când pagina nu s-a încărcat complet, de unde codul pentru pașii 06 și 07 plasând o funcție declanșată de evenimentul de încărcare, care se activează când fereastra a finalizat încărcarea.
window.addEventListener('load', function(){ *** STEP 6 HERE });06. Căutarea nodurilor
Prima activitate a JavaScript-ului care se execută imediat după ce pagina este gata este de a găsi toate straturile de paralaxă. În primul rând, se găsesc containerele de paralaxă, urmate de copiii lor. Fiecărui copil i se aplică un număr index sub atributul „date-index”.
ar nodes = document.querySelectorAll('[data-parallax]'); for(var i=0; i07. Ascultători paralaxi
Ultimul pas este să aplicați un ascultător de evenimente pentru orice mișcare a mouse-ului care apare peste containerul de paralaxă. Orice astfel de acțiuni declanșează o caracteristică pentru a calcula noile poziții ale straturilor de paralaxă pe baza poziției mouse-ului și a atributului index-date definit la pasul 06 - rezultând actualizarea fiecărui strat la pași diferiți. Rezultatul fiecărui calcul se aplică straturilor prin atributul style.
nodes[i].addEventListener('mousemove', function(e){ var elms = this.children; for(var c=0; c Acest articol a fost publicat inițial în numărul 272 al revistei de design web creativ Web designer . Cumpărați numărul 272 aici sau abonați-vă la Web Designer aici .
Articole similare:
