Share
Una dintre cele mai mari tendințe ale recentelor web design-uri moderne este folosirea efectelor scrolling parallax. În acest tutorial vă voi arăta cum puteți crea efectul pe site-ul dvs., cu puțină imaginație și puțin ajutor de la Stellar.js.
V-ar interesa să economisiți ceva timp și să vă asigurați că folosiți cele mai bune practici moderne? Există un plugin de slider jQuery care răspunde foarte bine pe Envato Market, care ar putea face treaba perfect! Este deja folosit pe peste 150.000 de site-uri web.
Efectul scrolling al paralaxelor a fost popular de când site-uri precum Nike's Better World au introdus-o pe site-urile lor cu câțiva ani în urmă. Efectul de parallax cu privire la interfețe a fost în jur de 80 de ani, când a fost folosit pentru prima oară în titluri de jocuri video și ulterior în jocuri. Mai recent, a început să apară în interfețele web - veți fi familiarizați cu silverbackapp care a folosit efectul ca parte a antetului.
Atunci când sunt combinate cu funcționalitatea derulantă a unui site, efectele scrolling-ului parallaxului pot avea un impact vizual puternic, mai ales când sunt combinate cu o formă de poveste care vă duce într-o călătorie.
Parallaxul este o deplasare sau o diferență în poziția aparentă a unui obiect privit de-a lungul a două linii diferite de vedere. - Wikipedia
Deci, care este efectul parallaxului? Ei bine, este probabil unul dintre lucrurile pe care clienții dvs. se referă când le spun orbește "Vreau site-ul meu HTML5". Ori de câte ori clienții mi-au cerut un site HTML5, trebuie să-i întreb în mod specific cum interpretează semnificația HTML5 - în momentul acesta pare să fie doar cuvântul cheie pe care clienții mi-l continuă să-mi spună fără să înțeleagă cu adevărat ce înseamnă.
Deci este HTML5? Sigur că HTML5 are un rol de jucat în efectul parallax scrolling, dar este mai mult decât HTML5, folosește și o formă de javascript, cum ar fi jQuery, și nu ar fi posibil fără un pic de CSS3.
Cuvântul parallax este derivat din varianta grecească (parallaxis), ceea ce înseamnă o modificare. Obiectele care sunt mai aproape de ochi au un parallax mai mare decât obiectele aflate în depărtare. Aceasta înseamnă că obiectele care sunt mai aproape de noi pot să pară că se mișcă mai repede decât obiectele din fundal.
Îmbinarea în mai multe fundaluri și obiecte (cum ar fi imaginile) și apoi permiterea acestora de a se deplasa la diferite viteze creează o senzație de adâncime și dimensiune.
Uitați-vă la câteva exemple care demonstrează efectele parallaxului.
Exemplele de mai sus vă duc într-o anumită formă de călătorie sau poveste, și o fac într-o varietate de moduri diferite. Acest lucru, după părerea mea, face ca succesul site-ului de parallax să devină un succes. Cheia pentru a deveni interesantă și unică este focalizarea pe o poveste și un concept bun, apoi folosirea efectului în moduri creative și imaginative.
Wieden + Kennedy (W & K), băieții din spatele site-ului Nike Better World sprijină acest lucru:
În opinia noastră, tehnologiile sunt independente de concept. Scopul nostru principal a fost crearea unei experiențe interactive deosebite despre povestiri. - Wieden + Kennedy (W & K)
Pentru a demonstra o modalitate de implementare a derulării paralela în site-ul dvs. am optat să vă arăt un simplu site web cu patru diapozitive care utilizează efectul asupra diferitelor fundaluri și imagini. De asemenea, am adăugat o navigație în colțul din stânga care va defila la un anumit diapozitiv de pe site și va schimba, de asemenea, dimensiunea pentru a reflecta numărul de diapozitive activ. De asemenea, folosesc fontul web Bebas, deși sunteți liber să folosiți altceva dacă doriți.
Iată cum va apărea structura noastră de directoare:
Pentru a mă ajuta să realizez acest lucru, folosesc Stellar.js, un plugin jquery de Mark Dalgleish, care facilitează crearea site-urilor de parallax scrolling. Există alte plugin-uri disponibile pentru a vă ajuta să faceți acest lucru pe care l-am enumerat în partea de jos a acestui articol. Am optat pentru utilizarea Stellar.js deoarece este destul de simplu de implementat și, deși nu este demonstrat în timpul acestui tutorial, acesta poate fi optimizat pentru a lucra pe platforme de dispozitive inteligente, cum ar fi iOS.
De asemenea, voi utiliza punctele jQuery de la Caleb Troughton. Waypoints este un alt plugin jQuery care execută o funcție ori de câte ori defilați la un element. Acest lucru permite navigarea pe site pentru a evidenția ce diapozitiv suntem în funcție de poziția barei de derulare.
jQuery easing este un plugin de la GSGD care oferă opțiuni avansate de relaxare. Vom folosi acest lucru pentru a adăuga o mișcare ușoară de relaxare atunci când trecem de la diapozitiv la diapozitiv.
După lansarea index.html, adăugăm doctype HTML5 și apoi creăm secțiunea cap. Aceasta constă dintr-o Resetare CSS urmată de foaia de stil "styles.css". Apoi adăugăm biblioteca jQuery urmată de fișierul jQuery personalizat "js.js". Acesta este apoi urmat de cele trei plugin-uri, "jquery.stellar.min.js", "waypoints.min.js" și "jquery.easing.1.3.js".
Creați un site parallax utilizând Stellar.js
Următorul element al html-ului nostru este imaginea siglei Envato care rămâne într-o poziție fixă constantă pe întregul site. La aceasta se adaugă o clasă de "envatologo", astfel încât să putem seta poziționarea acesteia mai târziu când codificăm CSS.
Cele patru diapozitive utilizează același marcaj:
Folosim o clasă de "diapozitiv" care va fi folosit ca un stil general pentru toate diapozitivele. Fiecărui diapozitiv i se dă un id de "diapozitiv" urmat de numărul de diapozitive, adică "Slide1". Utilizăm atributul de date HTML5 și îl denumim "date-slide". Acest lucru ne va permite să vizăm folosind jQuery. Se adaugă un alt atribut de date din "data-stellar-background-ratio". Aceasta este specifică pluginului stellar.js jQuery și spune pluginului la ce raport va fi viteza elementului.
Raportul este relativ la viteza naturală de derulare, astfel încât un raport de 0,5 ar determina elementul să deruleze la jumătate de viteză, un raport de 1 nu ar avea efect și un raport de 2 ar determina elementul să se rotească la dublul vitezei.
Toate diapozitivele, cu excepția diapozitivului patru, au un buton care ne va permite să defilați la diapozitivul următor. La aceasta se adaugă atributul "data-slide" cu valoarea următorului număr de diapozitiv. Acest lucru este astfel încât butonul știe ce diapozitiv este următorul, astfel încât să putem trece această valoare la jQuery. Majoritatea diapozitivelor au, de asemenea, o deschidere cu o clasă de "slideno"; pur și simplu o versiune text mare a numărului de diapozitive care apare în colțul din stânga jos al celor mai multe diapozitive. Acest lucru ar putea fi folosit și pentru titluri.
Accentsconagua
Slide 1 Pe diapozitivele trei și patru vom adăuga și câteva elemente de imagine în diapozitivul "slide". Aceste imagini vor oferi o imagine reală a efectului parallax pe care îl creăm. Am înfășurat aceste în interiorul unui "wrap" div, care va fi centralizat și are o lățime de 960px, doar pentru a se asigura că acesta se afișează OK în toate dimensiunile monitorului desktop.
Fiecare imagine are un atribut "data-stellar-ratio" atașat la acesta. Acest lucru este din nou stellar.js specific și spune plugin-ului la ce raport de viteză ar trebui să derulați elementul la.
Din fericire pentru noi nu avem prea multe implicări în CSS. Este, de fapt, stilul câtorva elemente simple, dar majoritatea este pentru poziționarea unora dintre elementele de imagine.
Primul lucru pe care trebuie să-l facem cu CSS este să aducem fontul BEBAS folosind @ font-face. Apoi adăugăm că la html pentru a seta fontul pentru site. De asemenea, stabilim lățimea și înălțimea html și corpului la 100%. Acest lucru va permite diapozitivelor noastre să adopte lățimea și înălțimea totală a ecranului utilizatorului.
@ font-face font-family: 'BebasRegular'; src: url ('font / BEBAS ___- webfont.eot'); src: url ('font / BEBAS ___- webfont.eot? #iefix') format (embedded-opentype), url ('font / BEBAS ___- webfont.woff' BEBAS ___- webfont.ttf ') format (' truetype '), url (' font / BEBAS ___- webfont.svg # BebasRegular ') format (' svg '); font-weight: normal; font-style: normal; html, corp font-family: 'BebasRegular'; lățime: 100%; înălțime: 100%; Navigația principală are o poziție "fixă" pentru ao păstra în același loc pe întregul site. Am compensat acest 20px din partea de sus pentru a da un pic de spațiu deasupra lui și a seta indexul z la 1 pentru a ne asigura că acesta se află pe stratul superior al site-ului.
Lista actuală este doar stilul textului cu o margine din partea de jos pentru a acționa ca o subliniere. Aceasta are o lățime de 53px. Se adaugă, de asemenea, o tranziție, astfel încât aceasta să fie animată de la starea sa standard până la starea de vârf. Am folosit prefixul -webkit aici doar pentru a păstra codul scurt, dar codul sursă complet care poate fi descărcat de mai sus conține toate prefixele furnizorilor.
Statul de hover utilizează, de asemenea, aceleași proprietăți ca și clasa "activă"; în principiu doar o creștere a dimensiunii și a lățimii fontului. Clasa "activă" este utilizată de jQuery pentru a modela diapozitivul relevant, care are în vedere fereastra browserului.
.navigare poziție: fixă; z-index: 1; top: 20px; .navigație li culoare: # 333333; display: block; umplutură: 0 10px; line-height: 30px; margin-bottom: 2px; font-weight: bold; -webkit-transition: all .2s ease-in-out; margine de fund: 1px solid negru; text-align: left; lățime: 53px; . navigație li: hover, .activ font-size: 25px; cursor: pointer; ! Lățime: 100px importantă;
Logo-ul envato are niște stiluri de poziționare doar pentru a se asigura că acesta rămâne în centrul ecranului. În mod similar cu navigația, se dă un index z de "1" pentru a se asigura că acesta rămâne pe partea de sus.
.envatologo poziție: fix; top: 50%; stânga: 50%; lățime: 446px; margin-top: -41px; margin-left: -223px; z-index: 1;
Acum ne îndreptăm spre stilul diapozitivelor actuale. Le oferim o proprietate "fixă" pentru atașamentul de fond. Proprietatea de atașament de fundal stabilește dacă o imagine de fundal este fixă sau derulează cu restul paginii, astfel încât este utilă pentru imaginile de fundal (cum ar fi cele utilizate pe diapozitivul patru). Pentru acest exemplu am folosit un wallpaper de Philipp Seiffert care poate fi descărcat aici. Am setat poziția diapozitivului la "relativă". Acest lucru este posibil pentru a putea poziționa absolut clasele "slideno" și "buton" pe diapozitiv, spre deosebire de documentul real.
Umbra cutie este pur și simplu pentru scopuri de decorare și adaugă o umbră de picătură frumos în partea superioară a fiecărui slide.
.slide background-attachment: fix; lățime: 100%; înălțime: 100%; poziție: relativă; box-shadow: inset 0px 10px 10px rgba (0,0,0,0,3); .wrapper width: 960px; height: 200px; marja: 0 auto; Poziția: relativă; .slideno poziție: absolută; bottom: 0px; stânga: 0px; font-size: 100px; font-weight: bold; Culoare: RGBA (255,255,255,0.3);
Butonul este pentru butonul din partea de jos a paginii, care ne permite să progresăm la următorul diapozitiv. Am poziționat-o în partea de jos a fiecărui diapozitiv și am folosit o imagine a unei săgeți ca indicator.
.butonul display: bloc; lățime: 50px; înălțime: 50px; Poziția: absolută; bottom: 0px; stânga: 50%; background-color: # 333333; fundal-imagine: url (... /images/arrow.png); background-repeat: no-repetare; .button: hover background-color: # 494949; cursor: pointer;
Stilul pentru fiecare diapozitiv individual este relativ simplu și urmează același model de fiecare dată. Diapozitivul are culoarea de fundal "# 5c9900". Slide 2 are, de asemenea, o culoare de fundal setată pe ea. Slide 2 conține, de asemenea, imagini și putem viza fiecare dintre ele utilizând selectorul CSS nth-copil (n). Acest selector poate fi descris ca
Această pseudo-clasă se potrivește elementelor pe baza pozițiilor lor în cadrul elementelor elementare ale elementului părinte.
Deci, în mod esențial, fiecare cameră este decorată în ordinea în care apar în marcarea noastră. Pur și simplu le poziționăm în raport cu învelișul diapozitivului.
/ ****************************** SLIDE 1 ***************** ************** / # slide1 fundal-culoare: # 5c9900; / ****************************** SLIDE 2 **************** *************** / # slide2 culoare-fundal: # 005c99; # slide2 img: primul-copil poziție: absolut; top: 700px; stânga: -150px; # slide2 img: n-copil (2) poziție: absolută; top: 300px; stânga: 100px; # slide2 img: n-copil (3) poziție: absolută; top: 600px; stânga: 300px; # slide2 img: n-copil (4) poziție: absolută; top: 400px; stânga: 300px; # slide2 img: n-copil (5) poziție: absolută; top: 600px; dreapta: 300px; # slide2 img: n-copil (6) poziție: absolută; top: 600px; dreapta: 300px; # slide2 img: n-copil (7) poziție: absolută; top: 400px; dreapta: 100px; # slide2 img: n-copil (8) poziție: absolută; top: 100px; dreapta: 300px;
Diapozitivul 3 urmează același costum ca al doilea.
/ ****************************** SLIDE 3 ***************** ************** / # slide3 fundal-culoare: # b6c10b; # slide3 img: primul-copil poziție: absolut; top: 700px; stânga: 300px; # slide3 img: n-copil (2) poziție: absolută; top: 100px; stânga: 100px; # slide3 img: n-copil (3) poziție: absolută; top: 150px; stânga: 300px; # slide3 img: n-copil (4) poziție: absolută; top: 450px; stânga: 300px; # slide3 img: n-copil (5) poziție: absolută; top: 200px; dreapta: 300px; # slide3 img: n-copil (6) poziție: absolută; top: 100px; dreapta: 300px;
Diapozitivul 4 este puțin diferit față de cele două diapozitive anterioare deoarece nu conține elemente de imagine sau culoare de fundal, ci folosește o imagine de fundal. De asemenea, i-am oferit proprietatea CSS3 'background-size: cover'. Acest lucru stabilește în mod fundamental imaginea de fundal pentru a acoperi întreaga fereastră a browserului și va fi redimensionată pe măsură ce fereastra browserului este redimensionată. Am adăugat, de asemenea, o linie de text pe ultimul diapozitiv pe care l-am desenat și am dat o clasă de "parallaxbg"
/ ****************************** SLIDE 4 ***************** ************** / # slide4 imagine-imagine: url (... /images/Slide4/desktop4.jpg); -webkit-background-size: cover; -moz-background-size: capac; -o-background-size: cover; dimensiunea fundalului: capac; # slide4 .parallaxbg poziție: absolută; dreapta: 40px; top: 40px; font-size: 28px; Culoare: RGBA (51,51,51,0.3);
JQuery este într-adevăr locul în care acest lucru începe să vină la viață. Am comentat codul, astfel încât să puteți vedea exact ce se întâmplă.
jQuery (document) .ready (functie ($) // initialize Stellar.js $ (fereastra) .stellar (); // Cache cateva variabile var links = $ ('navigare'). slide = $ ('. slide'); buton = $ ('.button'); mywindow = $ (fereastră); htmlbody = $ ('html, , direction) // cache variabila atributului data-slide asociat cu fiecare slide dataslide = $ (this) .attr ('data-slide'); // Daca utilizatorul scrolls up schimba linkul de navigare care are acelasi atributul de date-slide ca diapozitiv la activ și // elimina clasa activă de la legătura de navigare anterioară dacă (direcția === 'jos') $ (' ] 'altceva Dacă utilizatorul scroll jos schimba link-ul de navigare care are același atribut de date-slide ca și diapozitivul la activ și / / elimina clasa activă de la următoarea legătură de navigare altceva $ ('navigarea li [data-slide = "' + dataslide + '"]') addClass (' ) .RemoveClass ( 'activ'); ); // punctele doesnt detectează primul diapozitiv atunci când utilizatorul navighează înapoi până sus, astfel încât să adăugăm acest mic cod, care elimină clasa // din diapozitivul de navigare 2 și îl adaugă în diapozitivul de navigare diapozitiv 1. mywindow.scroll (funcția ()) if (mywindow.scrollTop () == 0) $ ('navigare li [data-slide = "1"]' = "2"]). RemoveClass ("activ");); // Creați o funcție care va fi trecută cu un număr de diapozitiv și apoi veți defila la acel diapozitiv folosind jquerys animate. De asemenea, se utilizează pluginul Jquery // easing, așa că am trecut în metoda de relaxare a "easeInOutQuint", care este disponibil prin pluginul. Funcția goToByScroll (dataslide) htmlbody.animate (scrollTop: $ ('. slide [data-slide = "' + dataslide + '"]). // Când utilizatorul dă clic pe linkurile de navigare, obține valoarea atributului de date al linkului și transmite acea variabilă la funcția goToByScroll links.click (funcția (e) e.preventDefault (); dataslide = $ ) .attr ("data-slide"); goToByScroll (dataslide);); // Când utilizatorul dă clic pe buton, obține valoarea de atribut de date a butonului și transmite acea variabilă la butonul funcției goToByScroll.click (funcția (e) e.preventDefault (); dataslide = $ (aceasta ) .attr ("data-slide"); goToByScroll (dataslide);); ); 
Dacă te uiți la diapozitivul doi din exemplul nostru, vei observa bulele 3D. Am adăugat o ușoară estompare gaussiană la unele dintre acestea, în special la cele care se află chiar în prim-plan și în fundal. Combinarea lor cu bule concentrate puternic adaugă la sensul de profunzime pe care il creează paralaxa. Acesta este un lucru pe care ar trebui să-l luați în considerare atunci când încercați să obțineți profunzime la site-ul dvs..
O mulțime de site-uri care utilizează acest efect tind să fie destul de greu de imagine, asigurați-vă că vă comprimați imaginile cât de mult puteți (fără a sacrifica calitatea). Dacă după comprimare este încă destul de mult timp pentru încărcare, atunci luați în considerare adăugarea unui încărcător pe site-ul dvs..
Parlaxarea scrolling este unul dintre cele mai iubite efecte ale timpurilor recente și oamenii sunt în mod constant împinge granițele cu ea. Aici astăzi v-am arătat cum să configurați un site de bază care utilizează scrolling parallax. Demo-ul pe care l-am arătat astăzi este un site relativ simplu în scopuri de învățare. Pentru cei care sunteți pe cale de a crea un site folosind acest efect, atunci vă indemn să petreceți timp pe concept și poveste, deoarece acestea le fac unice, împărtășite și într-adevăr, o plăcere să navigheze. Este vorba despre modul în care puteți utiliza acest efect cu înțelepciune și nu doar să îl utilizați pentru a-l folosi.
Sper că te-ai bucurat să citești despre parallax scrolling și mi-ar plăcea să văd cum ați folosit-o pe propriile dvs. site-uri, nu ezitați să lăsați link-uri la ele de mai jos. Pana data viitoare!
