Share
Å skape rulleinitierte bevegelser kan være utrolig gledelig. Vi vil dykke inn i en bestemt effekt som ses på Casper Madrass-nettsiden (opprettet av Jonnie Hallman) som imponerte mange utviklere. I denne opplæringen vil vi bryte ned trinnene som trengs for å lage en lignende sprite-animasjon med ScrollMagic.
La oss ta en titt på hva vi skal skape:
Før vi begynner koding, trenger vi en sprite å bruke som grunnlag for denne demoen. Her er den vi skal bruke: Jeg nyter en nydelig kopp kaffe. Du kan ta en kopi for å følge opplæringen.
mmmmmHele sprite er arrangert i lineær mote langs x-aksen. Hvert bilde i sprite er 200px x 509px som resulterer i en total størrelse på 2000px x 509px (hvert enkelt bilde er 200px bredt multiplisert med ti keyframes).
For det ekstremt nysgjerrige benyttet jeg spesielt Gulp-plugin gulp.spritesmith i stedet for å kutte sammen spritet manuelt. Selv om det ikke er nødvendig å lage denne demoen, er det oppsettet jeg brukte hvis du vil prøve det selv:
Accentsconagua
var gulp = krever ('gulp'); var spritesmith = krever ('gulp.spritesmith'); gulp.task ('sprite', funksjon () var spriteData = gulp.src ('images / * .png'). pipe (spritesmith (imgName: 'sprite.png', cssName: 'sprite.css', algoritmOpts : sort: false, algoritme: 'venstre-høyre',)), returner spriteData.pipe (gulp.dest ('images / dist')););Det er viktig å merke at algoritmen egenskapen kan akseptere et utvalg av verdier for å ordne sprite som lineær, vertikal, diagonal og mer. Jeg anbefaler at du tar deg tid til å lese mer om dette Gulp-pluginet for noen av dine fremtidige behov.
Markeringen er jorda hvorfra vår demo skal vokse, så vi begynner med å lage beholderen der sprite animasjonen vil finne sted. Vi skal også bygge noen dummy-beholdere for å få regioner til å bla gjennom.
Den midterste delen med den inneholdende div er hvor vår spritbevegelse brenner, men vi må legge til noen klasser og ids for styling og arrangementskrok formål.
Klassen js-scrollpin er det punktet som visningsporten vil bli "pinnet" etter som brukeren ruller. Dette stikkpunktet varer i en definert varighet satt fra våre JavaScript (vi vil adressere dette i en kommende seksjon). Det indre div med klassen ramme vil være punktet der rullende magien finner sted.
Vår demo ville ikke være komplett uten styling, så la oss komme i gang! For å skrive koden med oppdateringer og forbedringer i tankene bruker vi Sass, slik at vi kan lage loop og variabler for kortfattet forfattering.
$ frame-count: 9; $ offset-val: 100;
Disse variablene definerer:
Du kan legge merke til at jeg bare har satt rammen til 9 på grunn av at den første rammen allerede er i oversikt, og etterlater 9 rammer igjen i sekvensen (10 - 1 = 9).
Som nevnt, er hvert bilde i vår sprite 200px bredt, så jeg vil definere bredden på rammen som 200px.
.ramme bredde: 200px; bakgrunnsbilde: url (sprite.png); bakgrunn-gjentak: ikke-gjenta; bakgrunnsposisjon: 0 50%;
Bildet er lastet som bakgrunn og plassert tilsvarende.
Nå for løkken:
@for $ i fra 1 til $ ramme-count .frame # $ i bakgrunnsstilling: - (($ i * $ offset-val) * 2) + px 50%;
Denne Sass-løkken er den viktigste delen. Når vi ruller, blir hver korrelerende klasse skiftet via JavaScript; disse veksle klassenavnene korrelerer til plasseringen av hvert bilde i sprite.
.ramme1 bakgrunnsposisjon: -200px 50%; .frame2 bakgrunnsstilling: -400px 50%; .frame3 bakgrunnsstilling: -600px 50%; .frame4 bakgrunnsposisjon: -800px 50%; .frame5 bakgrunnsstilling: -1000px 50%; .frame6 bakgrunnsstilling: -1200px 50%; .frame7 bakgrunnsposisjon: -1400px 50%; .frame8 bakgrunnsstilling: -1600px 50%; .frame9 bakgrunnsstilling: -1800px 50%;
Den kompilerte produksjonen fra vår Sass bidrar til å forklare hvordan denne matematikken fungerer, men la oss dykke dypere for å sikre at vi forstår fullt ut hvordan regningen beregnes.
$ i * $ offset-val
På hver iterasjon av løkken på $ i variabel sykluser fra 1 til 9 og multiplisert med forskyvningsverdien (100). Til slutt tar vi hele resultatet og multipliserer med en faktor 2. Faktoren på 2 vil bidra til å flytte bakgrunnsposisjonen i forhold til hvor hvert bilde ligger i sprite. Den samsvarer også med offsetverdien som er definert i JavaScript som vi skal diskutere i neste del av reisen.
Nøkkelen til denne hele effekten er JavaScript. For denne spesielle demoen bruker vi ScrollMagic; et JavaScript-bibliotek for magiske rulleinteraksjoner. Før du skriver en ScrollMagic-kode, må vi sørge for at vi har biblioteket ScrollMagic lastet inn.
Med det gjort, etablerer vi noen variabler.
var ramme = document.querySelector ('. frame'), frame_count = 9, offset = 100;De definerte variablene skal se ganske kjent ut som de direkte relaterer seg til verdiene vi angav i vår Sass, med unntak av å velge rammeklassen ved å bruke document.querySelector.
var controller = ny ScrollMagic.Controller (globalSceneOptions: triggerHook: 0);
Kontrolleren er hovedklassen kreves en gang per rullebeholder. Våre globalSceneOptions objekt bestått inneholder a triggerHook. Denne egenskapens verdier kan være et tall mellom 0 og 1 som definerer posisjonen til utløserkroken i forhold til visningsporten.
ny ScrollMagic.Scene (triggerHook: 0, triggerElement: '.js-scrollpin', varighet: (frame_count * offset) + 'px', revers: true) .setPin ('. js-scrollpin') .addTo );Vi definerer tappen en gang i målscenen og legger til animasjonen vår i samme scene. Vi lager en scene for hver klasse og bytter dem på eller av avhengig av forskyvningsverdien for rullen.
Det er noen ting som går igjen for å forklare, så la oss slå ned de viktige delene:
triggerElement: '.js-scrollpin'
Utløsningselementet er referanseplanen til panelet som inneholder vår sprite.
.setPin (.' js-scrollpin')
De setPin Metoden vil fortelle ScrollMagic til, når triggerElement er nådd, pin det panelet til toppen av visningsporten.
varighet: (frame_count * offset) + 'px',
Varigheten vil bidra til å kontrollere hvor lenge bevegelsen skjer, basert på rammenummer og offset. Som du vil huske, hadde vi et rammevalg på 9 og en kompensasjon på 100. Disse verdiene når de blir multiplisert sammen, tilsvarer 900px; den totale verdien av utløser offset poeng.
for (var i = 1, l = frame_count; jeg <= l; i++) new ScrollMagic.Scene( triggerElement: '.js-scrollpin', offset: i * offset ) .setClassToggle(frame, 'frame' + i) .addTo(controller);
Siden det er 9 rammer, slår vi gjennom det antall iterasjoner mens du definerer det samme panelet for en triggerElement. Ved hver iterasjon av sløyfen multipliserer vi den kretsens verdi med kompensasjonsbeløpet (1 * 100, 2 * 100, 3 * 100 ...). Vi definerer også en klasse for å bytte gjennom; .frame1, .Frame2, .frame3 og så videre. Hver av klassene representerer bakgrunnsposisjonen til hvert bilde i sprite.
Du lurer kanskje på hva den totale filstørrelsen til sprite er, så la meg legge ned noen tall. Uncompressed bildet veide inn i en heftig 1,5 MB, men når komprimert resulterte i en mer akseptabel 319 KB. Dette inkluderer ikke 6KB gzipped for å laste inn ScrollMagic-biblioteket.
Jeg håper du er inspirert av denne teknikken til å bruke i ditt neste prosjekt, og vær så velkommen til å stille spørsmål i kommentarene nedenfor, som alltid. Glad koding!
