Accentsconagua

Introduserer ScrollMagic 2.0

Webdesign
Share

Hvis du er desperat til å generere vakre rulleanimasjoner i ditt neste prosjekt, så se ikke lenger. ScrollMagic er et JavaScript-bibliotek som hjelper deg med å lage "magiske" rulleinteraksjoner som enkelt reagerer på brukerens nåværende rulleposisjon og utløseranimasjoner eller synkroniserte hendelser. 

ScrollMagic har nylig gjennomgått noen store endringer, så her er en rask gjennomgang gjennom å diskutere endringene og forbedringene siden gjenfødelsen.

The ScrollMagic hjemmeside

Hva er nytt?

Avhengigheter som var en gang kjernekomponenter av ScrollMagic, som GreenSock (GSAP) og jQuery, er fjernet helt fra biblioteket. Fra 2.0.0 alt som legger til funksjoner på toppen av ScrollMagic blir behandlet som et plugin, og gjør ScrollMagic til et frittstående bibliotek (6KB gzipped)! 

Changelog inneholder mange andre fasetter som er justert, bør du velge å dykke dypere. Hvis du ikke har tid, her er en liste som fremhever noen av endringene:

  1. Fjerning av avhengigheter og innføring av plugins
  2. Kontrollører er nå instantiated using ScrollMagic.Controller ()
  3. Scener er nå definert som ScrollMagic.Scene ()
  4. Fjerning av triggerOffset
  5. Fjerning av pinClass (dette kan oppnås med setClassToggle i 2,0)
  6. pushfollowers standardverdien er satt til falsk
  7. Nye hendelser: Legg til og fjerne
  8. omdøpt .forelder til .kontrolleren
  9. Feilsøkingsendring endret til plugins / scene.addIndicators og kan legges til kontrolleren og fungerer selv når scenene fjernes og legges til igjen.
  10. Ny metode removeIndicators

Ytelse Tweaks

Performance tweaks forbedrer hastigheten på ScrollMagic ble foreslått av Paul Irish med hensyn til å oppdatere RAF (request animation frame). I stedet for å høre direkte på rullehendelsen, ble en teknikk kalt "debouncing" opprinnelig brukt. Dette betyr at alt som skal utføres på Scroll, faktisk utføres i en timeout (forsinkelse). Når onScroll hadde blitt utløst det eneste som endret var en variabel som wasScrolled = true og inspisert for i timeout-funksjonen. Opprinnelig ble debounce-funksjonen kalt RAF og lette stadig etter wasScrolled Var i en løkke. 

Nå, i stedet for en sløyfe, er det bare planlegging å sjekke på neste RAF når en rullehendelse utløses. Alt dette betyr at når ingen rulling skjer, går det ingen løkke!

Responsive Durations

Responsive varigheter må være en av mine favoritt forbedringer til biblioteket i tillegg til ytelsen øker. De scene Varighet kan nå akseptere en prosentvis verdi streng som "100%". Rullen beregnes i forhold til størrelsen på rullebeholderen. ScrollMagic vil bruke beholderens høyde for vertikalt rulleanlegg og dens bredde for horisontalt rullende containere.

var scene = ny ScrollMagic.Scene (varighet: "100%");

Skriptinnlasting

Skriptordre er ganske annerledes nå, siden biblioteker som GSAP er blitt skilt i motsetning til å være en del av ScrollMagic-kjernen. Dette betyr at når du ønsker et bibliotek som TweenMax må du først laste inn GSAP-biblioteket først, etterfulgt av kjernen ScrollMagic lib, så til slutt har ScrollMagic-pluginet du valgt. 

Husk å alltid laste inn GSAP-biblioteket først, deretter ScrollMagic-pluginene.

Skriptanropet for GSAP-plugin er ScrollMagics nye plugin som inneholder GSAP-tween-funksjonaliteten som tidligere ble integrert i ScrollMagic. Jan har også integrert velocity.js for de som ikke ønsker funksjonaliteten GSAP gir.

Definere Controllers

En kontroller er en måte å "kontrollere scener." Det er en klasse som trengs en gang per rullebeholder og skrevet litt annerledes i 2,0.

La oss sammenligne måten regulatorer er instantiated nå, med hvordan de var i den gamle versjonen:

Gammel måte

var controller = ny ScrollMagic ();

Ny måte

var controller = ny ScrollMagic.Controller ();

scener

Scenen er plasseringen av bevegelsen / animasjonen. Det definerer hvor kontrolleren skal reagere og hvordan. Det er også et annet eksempel på hvor syntaks har endret seg litt.

Gammel måte

var scene = ny ScrollScene (triggerElement: "# pinned-trigger", varighet: $ (vindu) .height () - 100, triggerHook: 0, reverse: true) .setPin ("# pinned-element") .addTo (kontroller);

Ny måte

var scene = ny ScrollMagic.Scene (triggerElement: "# pinned-trigger", varighet: $ (vindu) .height () - 100, triggerHook: 0, reverse: true) .setPin ("# pinned-element") .addTo (kontroller);

Oppdateringstips

Når jeg snakket med ScrollMagics skaperen Jan Paepke, lærte jeg et fantastisk tidsbesparende tips for å hjelpe migrere fra den gamle ScrollMagic-koden til den nye

  1. Først utfører du en "Søk og erstatt" i teksteditoren for "ScrollMagic"Og erstatt strengen med"SM_TMP"I alle filene dine. 
  2. Neste erstatning "ScrollScene"Med"ScrollMagic.Scene”.
  3. Til slutt, erstatt "SM_TMP"Med"ScrollMagic.Controller”.

Merk: Pass på at du ikke inkluderer ScrollMagics kildefiler i søk-bare, bruk den til din egen kode. Det er et ekstra skritt, men er sikrere fordi det er situasjoner hvor du kan ha mellomrom før parentesene.

dokumentasjon

Hvis du trenger veiledning med ScrollMagic, kan du se på min CodePen-samling som brukes til WIKI-delen av ScrollMagic repo. WIKI har også gode forklaringer, sammen med demoene som er gitt i eksemplardelen av det offisielle ScrollMagic-nettstedet:

Nå må du lage fantastiske rulleanimasjoner for prosjektet ditt!

Webdesign
×