Introducerea ScrollMagic 2.0

Dacă sunteți dispus să generați animații de parcurgere frumoase în următorul proiect, nu căutați mai departe. ScrollMagic este o bibliotecă JavaScript care vă ajută să creați interacțiuni de navigare "magice" care reacționează fără efort la poziția curentă de defilare a utilizatorului și animațiile de declanșare sau evenimentele sincronizate. 

ScrollMagic a suferit recent unele mari schimbări, așa că este o scurtă trecere în revistă a discuțiilor despre schimbări și îmbunătățiri de la renaștere.

Pagina principală ScrollMagic

Ce mai e nou?

Dependențele care au fost odată componente principale ale ScrollMagic, precum GreenSock (GSAP) și jQuery, au fost eliminate în întregime din bibliotecă. Din 2.0.0 tot ceea ce adaugă caracteristici deasupra din ScrollMagic este tratat ca un plugin, în final făcând ScrollMagic o bibliotecă independentă (6KB gzipped)! 

Changelog-ul conține multe alte fațete care au fost ajustate, dacă alegeți să vă aruncați mai adânc. În cazul în care nu aveți timp, iată o listă care evidențiază unele dintre modificări:

1. Eliminarea dependențelor și introducerea pluginurilor
2. Controlerele sunt acum instanțiate folosind ScrollMagic.Controller ()
3. Scenele sunt acum definite ca ScrollMagic.Scene ()
4. Renuntare la triggerOffset
5. Renuntare la pinClass (acest lucru se poate realiza cu setClassToggle în 2.0)
6. pushfollowers valoarea prestabilită este setată la fals
7. Evenimente noi: adăuga și elimina
8. Renamed .mamă la .controlor
9. Extensia de depanare a fost redenumită plugins / scene.addIndicators și pot fi adăugate în fața controlerului și funcționează chiar și atunci când scene sunt eliminate și re-adăugate.
10. Metodă nouă removeIndicators

Performanță optimă

Performanțele de îmbunătățire a vitezei ScrollMagic au fost sugerate de Paul Irish în ceea ce privește actualizarea RAF (frame animation request). În loc să asculte direct evenimentul de derulare, a fost inițial utilizată o tehnică numită "debouncing". Aceasta înseamnă că tot ce ar trebui să fie executat pe Scroll este de fapt executat într-un timeout (întârziere). Cand onScroll a fost declanșat singurul lucru care sa schimbat a fost o variabilă, cum ar fi wasScrolled = true și inspectate pentru funcția timeout. Inițial, funcția debounce a fost apelată la RAF și a căutat în mod constant wasScrolled var într-o buclă. 

Acum, în loc de o buclă, este doar programarea pentru a verifica următorul RAF atunci când un eveniment scroll este declanșat. Toate acestea înseamnă că atunci când nu se întâmplă nicio defilare, nu se execută nicio buclă!

Durata reactivă

Timpii responsabili trebuie să fie una dintre îmbunătățirile mele favorite ale bibliotecii, în afară de creșterea performanțelor. Scenă durata poate accepta acum un șir de valori procentuale cum ar fi "100%". Parcurgerea va fi calculată în funcție de mărimea containerului derulării. ScrollMagic va folosi înălțimea containerului pentru sistemele de defilare verticală și lățimea sa pentru derularea orizontală a containerelor.

var sc = ScrollMagic.Scene nou (duration: "100%");

Încărcare Script

Comanda Script este destul de diferită acum, deoarece bibliotecile ca GSAP au fost separate, spre deosebire de a fi parte a nucleului ScrollMagic. Acest lucru înseamnă că oricând doriți o bibliotecă ca TweenMax, va trebui să încărcați mai întâi biblioteca principală GSAP, urmată de instrumentul de bază ScrollMagic lib, apoi de pluginul ScrollMagic pe care l-ați ales. 

Nu uitați să încărcați întotdeauna principala bibliotecă GSAP, atunci pluginurile ScrollMagic.

Apelul script pentru pluginul GSAP este noul plugin al ScrollMagic care conține funcția GSAP tween, integrată anterior în ScrollMagic. Jan a integrat, de asemenea, viteza.js pentru cei care nu doresc funcționalitatea GSAP.

Definirea controlorilor

Un controler este o modalitate de a "controla scenele". Este o clasă care este necesară odată per container de scroll și scrisă ușor diferită în 2.0.

Să comparăm modul în care sunt acum instanțiate controlorii, cu modul în care erau în versiunea veche:

Metoda veche

var controller = nou ScrollMagic ();

Metoda noua

var controller = noul ScrollMagic.Controller ();

scene

Scena este locația mișcării / animației. Acesta definește locul în care controlerul ar trebui să reacționeze și cum. Este, de asemenea, un alt exemplu în care sintaxa sa schimbat ușor.

Metoda veche

var scroll = noua ScrollScene (triggerElement: "# pinned-trigger", durata: $ (fereastra) .height () - 100, triggerHook: 0, invers: true). (controlor);

Metoda noua

var scroll = noua ScrollMagic.Scene (triggerElement: "# pinned-trigger", durata: $ (fereastra) .height () - 100, triggerHook: 0, invers: true). .addTo (regulator);

Sfaturi actualizări

Când vorbim cu creatorul ScrollMagic, Jan Paepke, am învățat un sfat minunat de salvare a timpului pentru a vă ajuta să migrați de la vechiul cod ScrollMagic la noul

1. Mai întâi efectuați o căutare și înlocuire în editorul de text pentru "ScrollMagic"Și înlocuiți șirul cu"SM_TMP"În toate fișierele. 
2. În continuare înlocuiți "ScrollScene" cu "ScrollMagic.Scene“.
3. În cele din urmă, înlocuiți "SM_TMP" cu "ScrollMagic.Controller“.

Notă: Asigurați-vă că nu includeți fișierele sursă ale ScrollMagic în căutarea dvs. - aplicați-o numai în propriul cod. Este un pas suplimentar, dar este mai sigur deoarece există situații în care puteți avea spații înaintea parantezelor.

Documentație

Dacă aveți nevoie de îndrumare cu ScrollMagic puteți să aruncați o privire la colecția mea CodePen folosită pentru secțiunea WIKI a repo ScrollMagic. WIKI are, de asemenea, explicații excelente, împreună cu demonstrațiile oferite în exemplul din site-ul oficial ScrollMagic:

Acum, faceți animații de derulare minunate pentru proiectul dvs.!