Share
Crearea unei mișcări inițiate de scroll poate fi extrem de plăcută. Vom fi scufundați într-un anumit efect văzut pe site-ul Casper Mattress (creat de Jonnie Hallman), care a captivat mulți dezvoltatori. În acest tutorial vom detalia pașii necesari pentru a realiza o animație sprite similară cu ScrollMagic.
Să aruncăm o privire la ceea ce vom crea:
Înainte de a începe codarea, vom avea nevoie de un sprite pe care să îl folosim ca bază pentru acest demo. Iată ce vom folosi: eu, savurând o ceașcă de cafea minunată. Puteți lua o copie pentru a urma tutorialul.
mmmmmÎntregul sprite este aranjat liniar de-a lungul axei x. Fiecare imagine din sprite este 200px x 509px rezultând o dimensiune totală de 2000px x 509px (fiecare imagine are o lățime de 200px înmulțită cu zece cadre cheie).
Pentru extrem de curios am folosit în mod special pluginul Gulp gulp.spritesmith în loc de a pune împreună sprite manual. Deși nu este necesar să creați această demonstrație, iată configurația pe care am folosit-o în cazul în care doriți să o încercați singură:
Accentsconagua
var gulp = necesită ("gulp"); var spritesmith = cer ("gulp.spritesmith"); gulp.task ('sprite', funcție () var spriteData = gulp.src ('images / * .png') pipe (spritesmith imgName: 'sprite.png', cssName: 'sprite.css', algorithmOpts : sort: false, algoritm: "stânga-dreapta",)); returnați spriteData.pipe (gulp.dest ('images / dist'));));Este important de notat că proprietatea algoritmului poate accepta un sortiment de valori pentru a aranja sprite-ul ca fiind liniar, vertical, diagonal și multe altele. Vă recomandăm să vă faceți timp să citiți mai multe despre pluginul Gulp pentru oricare din nevoile viitoare de sprite.
Marcajul este solul din care se va dezvolta demo-ul nostru, așa că vom începe prin crearea containerului în care va avea loc animația sprite. De asemenea, vom construi niște containere falsificate, pentru ca regiunile să se poată derula.
Secțiunea mijlocie cu conținutul div este locul unde se declanșează mișcarea sprite, dar va trebui să adăugăm câteva clase și ID-uri pentru scopuri de styling și cârlig.
Clasa js-scrollpin este punctul de la care fereastra de vizualizare va deveni "fixată" pe măsură ce utilizatorul scroll. Acest punct de lipire va dura o durată definită stabilită în cadrul JavaScript (vom aborda acest lucru într-o secțiune viitoare). Interiorul div cu clasa cadru va fi punctul în care are loc magia de defilare.
Demo-ul nostru nu ar fi complet fără stil, așa că să începem! Pentru a scrie codul cu actualizări și îmbunătățiri în minte vom folosi Sass, permițându-ne să creăm buclă și variabile pentru scrierea succintă.
$ frame-count: 9; $ offset-val: 100;
Aceste variabile definesc:
S-ar putea să observați că am setat doar numărul de cadre la 9 datorită faptului că primul cadru este deja vizualizat, lăsând 9 cadre rămase în secvență (10 - 1 = 9).
Așa cum am menționat, fiecare imagine din sprite este de 200px lățime, așa că voi defini lățimea cadrului ca fiind de 200px.
.cadru lățime: 200px; fundal-imagine: url (sprite.png); background-repeat: nu-repeta; pozitie fundal: 0 50%;
Imaginea este încărcată ca fundal și poziționată corespunzător.
Acum, pentru bucla:
@ pentru $ i de la 1 la $ frame-count .frame # $ i background-position: - (($ i * $ offset-val) * 2) + px 50%;
Această bucla Sass este cea mai importantă parte. Pe măsură ce defilam, fiecare clasă de corelare va fi activată prin intermediul JavaScript; aceste nume de clase schimbate se corelează cu poziția fiecărei imagini din sprite.
.cadru1 background-position: -200px 50%; .frame2 background-position: -400px 50%; .frame3 background-position: -600px 50%; .frame4 background-position: -800px 50%; .frame5 background-position: -1000px 50%; .frame6 background-position: -1200px 50%; .frame7 background-position: -1400px 50%; .frame8 background-position: -1600px 50%; .frame9 background-position: -1800px 50%;
Extrasul compilat de la Sass ne ajută să explicăm cum funcționează acest matematică, dar să ne aruncăm mai adânc pentru a ne asigura că înțelegem în totalitate modul în care se calculează aritmetica.
$ i * $ offset-val
La fiecare iterație a buclei $ i cicluri variabile de la 1 la 9 și înmulțite cu valoarea decalajului (100). În cele din urmă, luăm întregul rezultat și înmulțim cu un factor 2. Factorul 2 va ajuta la mutarea poziției de fundal în raport cu locul în care fiecare imagine se află în sprite. De asemenea, se potrivește cu valoarea de compensare definită în JavaScript, pe care o vom discuta în următoarea parte a călătoriei noastre.
Cheia acestui efect este JavaScript. Pentru această demonstrație specială vom folosi ScrollMagic; o bibliotecă JavaScript pentru interacțiuni de navigare magică. Înainte de a scrie orice cod ScrollMagic, asigurați-vă că avem biblioteca ScrollMagic încărcată.
Cu ce am făcut, vom stabili câteva variabile.
var cadru = document.querySelector ("cadru"), frame_count = 9, offset = 100;Variabilele definite ar trebui să pară destul de familiare, deoarece acestea se referă direct la valorile specificate în Sass, cu excepția selectării clasei de cadru folosind document.querySelector.
var controller = noul ScrollMagic.Controller (globalSceneOptions: triggerHook: 0);
Controlerul este clasa principală necesară o dată pe containerul de derulare. Al nostru globalSceneOptions obiect trecut conține a triggerHook. Valorile acestei proprietăți pot fi un număr între 0 și 1, care definește poziția cârligului de declanșare în raport cu portul de vizualizare.
noul ScrollMagic.Scene (triggerHook: 0, triggerElement: '.js-scrollpin', durata: (frame_count * offset) + 'px', invers: true) .setPin );
Definim pinul o dată în scenă țintă și atașăm animația noastră în aceeași scenă. Vom crea o scenă pentru fiecare clasă și le vom activa sau dezactiva în funcție de valoarea offset a parcurgerii.
Există câteva lucruri care trebuie lăsate să fie explicate, așa că să defalcăm părțile importante:
triggerElement: '.js-scrollpin'
Elementul Trigger este id-ul de referință al panoului care conține sprite-ul nostru.
.setPin (“. js-scrollpin')
setPin metoda va spune ScrollMagic, o dată pe triggerElement , atingeți panoul respectiv în partea de sus a ferestrei de vizualizare.
durata: (frame_count * offset) + 'px',
Durata va ajuta la controlul timpului în care se produce mișcarea, pe baza numărului de cadre și a offsetului. După cum vă veți aminti, am avut un număr de cadre de 9 și un decalaj de 100. Aceste valori, atunci când sunt multiplicate împreună, echivalează cu 900px; valoarea totală a punctelor de compensare a declanșatorului.
pentru (var i = 1, l = valoarea cadrului; i <= l; i++) new ScrollMagic.Scene( triggerElement: '.js-scrollpin', offset: i * offset ) .setClassToggle(frame, 'frame' + i) .addTo(controller);
Din moment ce există 9 cadre, vom trece prin numărul de iterații în timp ce definim același panou pentru un triggerElement. La fiecare iterație a buclei se multiplică valoarea buclei cu suma compensată (1 * 100, 2 * 100, 3 * 100 ...). De asemenea, definim o clasă pentru a comuta; .frame1, .frame2, .frame3 si asa mai departe. Fiecare dintre clase reprezintă poziția de fundal a fiecărei imagini în sprite.
S-ar putea să te întrebi ce înseamnă fișierul total al fișierului, așa că lasă-mă să dau niște numere. Necomprimat imaginea cântărită la un nivel ridicat de 1,5 MB, dar când a fost comprimat rezultă o valoare mai acceptabilă de 319 KB. Acest lucru nu include 6kB gzipped pentru a încărca biblioteca ScrollMagic.
Sper că sunteți inspirat de această tehnică pentru a vă folosi în următorul proiect și vă rugăm să vă simțiți liber, ca întotdeauna, să puneți întrebări în comentariile de mai jos. Codificare fericită!
