Share
Att skapa rullningsinitiativ rörelse kan vara oerhört glädjande. Vi kommer att dyka in i en speciell effekt som ses på Casper Madrass webbplats (skapad av Jonnie Hallman) som fängslade många utvecklare. I denna handledning bryts ned de steg som behövs för att göra en liknande sprite-animation med ScrollMagic.
Låt oss ta en titt på vad vi ska skapa:
Innan vi börjar kodning behöver vi en sprite som ska användas som grund för denna demo. Här är den vi ska använda: Jag njuter av en härlig kopp kaffe. Du kan ta en kopia för att följa handledningen.
mmmmmHela sprite är ordnad linjärt längs x-axeln. Varje bild i sprite är 200px x 509px vilket ger en total storlek på 2000px x 509px (varje enskild bild är 200px bred multiplicerad med tio nyckelbilder).
För det ytterst nyfikna utnyttjade jag specifikt Gulp-plugin gulp.spritesmith istället för att sätta samman spritet manuellt. Även om det inte är nödvändigt att skapa den här demoen, så är den inställningen jag använde om du vill prova själv:
Accentsconagua
var gulp = kräver ("gulp"); var spritesmith = kräver ('gulp.spritesmith'); gulp.task ('sprite', funktion () var spriteData = gulp.src ('images / * .png'). rör (spritesmith (imgName: 'sprite.png', cssName: 'sprite.css', algoritmOpts : sort: false, algoritm: 'vänster-höger',)), returnera spriteData.pipe (gulp.dest ('images / dist')););Det är viktigt att notera att algoritmegenskapen kan acceptera ett sortiment av värden för att ordna spritet som linjärt, vertikalt, diagonalt och mer. Jag rekommenderar att du tar dig tid att läsa mer om detta Gulp-plugin för alla dina framtida behov.
Markeringen är marken från vilken vår demo kommer att växa så vi börjar med att skapa behållaren där sprite-animationen kommer att äga rum. Vi ska också konstruera några dummybehållare för att regionerna ska bläddra igenom.
Mellansektionen med innehållet div är där vår sprite rörelse bränder, men vi måste lägga till några klasser och ids för styling och händelse krok ändamål.
Klassen js-scrollpin är den punkt från vilken visningsporten kommer att "fastas" när användaren rullar. Denna ställe kommer att ligga i en bestämd längd som sitter inuti vår JavaScript (vi kommer att adressera detta i en kommande sektion). Det inre div med klassen ram kommer att vara den punkt där den rullande magiken äger rum.
Vår demo skulle inte vara komplett utan styling, så låt oss börja! För att skriva koden med uppdateringar och förbättringar i åtanke ska vi använda Sass, så att vi kan skapa loop och variabler för kortfattad författande.
$ frame-count: 9; $ offset-val: 100;
Dessa variabler definierar:
Du kanske märker att jag bara har satt ramräknaden till 9 på grund av det faktum att den första ramen redan är i sikte och lämnar 9 ramar kvar i sekvensen (10 - 1 = 9).
Som nämnts är varje bild inom vår sprite 200x bred så jag definierar bredden på ramen som 200px.
.ram bredd: 200px; bakgrundsbild: url (sprite.png); background-repeat: no-repeat; bakgrundsställning: 0 50%;
Bilden laddas som bakgrund och placeras i enlighet därmed.
Nu för slingan:
@for $ i från 1 till $ ramräkning .frame # $ i bakgrundsposition: - (($ i * $ offset-val) * 2) + px 50%;
Denna Sass-loop är den viktigaste delen. När vi rullar kommer varje korrelerande klass att växlas via JavaScript; dessa skiftade klassnamn korrelerar med positionen för varje bild inom sprite.
.ram1 bakgrundsposition: -200px 50%; .frame2 bakgrundsposition: -400px 50%; .frame3 bakgrundsposition: -600px 50%; .frame4 bakgrundsposition: -800px 50%; .frame5 bakgrundsposition: -1000px 50%; .frame6 bakgrundsställning: -1200px 50%; .frame7 bakgrundsposition: -1400px 50%; .frame8 bakgrundsposition: -1600px 50%; .frame9 bakgrundsposition: -1800px 50%;
Den sammanställda produktionen från vår Sass hjälper till att förklara hur denna matematik fungerar, men låt oss dyka djupare för att se till att vi helt förstår hur aritmetiken beräknas.
$ i * $ offset-val
På varje iteration av slingan $ i variabla cykler från 1 till 9 och multiplicerat med offsetvärdet (100). Slutligen tar vi hela resultatet och multiplicerar med en faktor 2. Faktorn med 2 hjälper till att flytta bakgrundspositionen i förhållande till var varje bild finns i spritet. Den matchar också det offsetvärde som definieras i JavaScript som vi kommer att diskutera i nästa del av resan.
Nyckeln till hela denna effekt är JavaScript. För denna speciella demo använder vi ScrollMagic; ett JavaScript-bibliotek för magiska scroll-interaktioner. Innan vi skriver någon ScrollMagic-kod, låt oss se till att vi har laddat ScrollMagic-biblioteket.
Då kommer vi att fastställa några variabler.
var ram = document.querySelector ('. frame'), frame_count = 9, offset = 100;De definierade variablerna ska se ganska bekanta ut eftersom de direkt hänför sig till de värden som vi angav i vår Sass, med undantag för att välja ramklassen med hjälp av document.querySelector.
var controller = ny ScrollMagic.Controller (globalSceneOptions: triggerHook: 0);
Styrenheten är huvudklassen krävs en gång per rullbehållare. Vår globalSceneOptions objekt som passerat innehåller a triggerHook. Den här egenskapens värden kan vara ett tal mellan 0 och 1 som definierar läget för utlösarkroken i förhållande till visningsporten.
ny ScrollMagic.Scene (triggerHook: 0, triggerElement: '.js-scrollpin', duration: (frame_count * offset) + 'px', omvänd: true) .setPin ('.js-scrollpin') .addTo );Vi definierar tappen en gång i målscenen och bifogar vår animering inom samma scen. Vi skapar en scen för varje klass och växlar dem på eller av beroende på rullningsförskjutningsvärdet.
Det finns några saker kvar för att förklara så låt oss bryta ner de viktiga delarna:
triggerElement: '.js-scrollpin'
Trigger-elementet är referens-id för panelen som innehåller vår sprite.
.setPin ('. js-scrollpin')De setPin Metoden kommer att berätta ScrollMagic att, en gång triggerElement nås, peka på den här panelen överst i visningsporten.
duration: (frame_count * offset) + 'px',
Varaktigheten kommer att hjälpa till att styra hur länge rörelsen sker, baserat på ramräkningen och förskjutningen. Som du kommer ihåg, hade vi en ramräkning av 9 och en kompensation på 100. Dessa värden när de multipliceras tillsammans är lika med 900px; det totala värdet av utlösnings-offsetpunkterna.
för (var i = 1, l = frame_count; i <= l; i++) new ScrollMagic.Scene( triggerElement: '.js-scrollpin', offset: i * offset ) .setClassToggle(frame, 'frame' + i) .addTo(controller);
Eftersom det finns 9 ramar, slungar vi igenom det antal iterationer samtidigt som vi definierar samma panel för en triggerElement. Vid varje iteration av slingan multiplicerar vi slingans värde med det förskjutna beloppet (1 * 100, 2 * 100, 3 * 100 ...). Vi definierar också en klass att växla igenom; .frame1, .frame2, .Frame3 och så vidare. Var och en av klasserna representerar bakgrundspositionen för varje bild i spritet.
Du kanske undrar vad spriteens totala filstorlek är, så låt mig lägga ner några siffror. Uncompressed bilden vägde in i en stor 1,5 MB, men när komprimerad resulterade i en mer acceptabel 319 KB. Detta inkluderar inte 6KB gzipped för att ladda biblioteket ScrollMagic.
Jag hoppas att du är inspirerad av den här tekniken att använda i ditt nästa projekt och snälla, som alltid, fråga dig i kommentarerna nedan. Lycklig kodning!
