Rullningseffekter är alla raserier dessa dagar. När användaren flyttar ner på sidan, går innehållet mer än att flytta upp på skärmen, det kommer att bli levande och blir mer intressant. Tyvärr finns det inget enkelt sätt att dra bort dessa effekter med ren CSS. Om du inte känner till JavaScript har du ingen lycka till.
Det är där Stroll.js kommer in. Det är en super lätt att implementera bibliotek som gör att tillämpa skrämmande rullningseffekter en vind. Allt du behöver göra är att klistra in i några korta rader med JavaScript, resten hanteras alla med HTML och CSS. Fortsätt läsa och jag ska visa dig hur det fungerar.
Möt Stroll.js
Stroll.js är ett snyggt litet JavaScript-bibliotek som ger ett flertal iögonfallande animationer till rullningsåtgärden på listobjekt. Tanken är att du har en grupp av objekt i en rullbar lista och du använder Stroll.js för att göra surfning den listan mer intressant.
Projektens startsida (visas ovan) har en massa demonstrationer som du kan försöka se vilka typer av effekter som ingår. Animationerna själva är faktiskt byggda med enkla CSS3-omvandlingar så att du enkelt skulle kunna lägga till och anpassa biblioteket med dina egna idéer.
Låt oss bygga en demo!
Varje gång jag stöter på ett coolt projekt som Stroll.js vill jag omedelbart dyka in, sparka på däcken och se hur allt fungerar. Att läsa tråkig dokumentation är bra och bra, men jag kan verkligen inte känna mig för något sådant tills jag försöker själv. Det är vad vi ska göra idag.
demo: Klicka här för att starta.
html
För att börja, vet vi att vi behöver en lista eftersom det är vad Stroll.js handlar om: animeringslistan rullar. Listobjekten på demo var bara en enkel textrad, men jag vill trycka det mycket längre för att se hur Stroll.js hanterar det. Vi gör att varje listobjekt innehåller en bild, rubrik och punkt.
Om du använder Zen-kodning som jag gör skriver du följande i HTML-editoren (annars skriver du bara in nästa del manuellt).
Som ni kan se började vi med en oorderad lista, gav den sedan ett listobjekt barn, som innehåller de tre elementen vi just sagt att vi ville ha. När du trycker på fliken eller vilken genväg som din redaktör använder, kommer den att expandera till följande HTML:
Bilder
För bildstorlekarna lägger vi till en marginal på 20px för att ge dem andningsrum och en gränsradio på 50% (se, inga webbläsarprefix!) För att göra miniatyrerna perfekt runda. Vi flyter också bilderna kvar så att texten visas längs sidan i stället för under dem.
Typografi
För typen måste vi definiera våra h2- och styckeformat. Jag använde stenografi för att ge rubriken en djärv, sans-serif behandling och stycket en normal vikt, serif behandling. Observera också att stycket har en något ljusare färg för att hjälpa till att skilja de två visuellt.
Lista
Nu är det dags för den största delen av CSS, det sista stycket som gör att våra listobjekt ser perfekt ut. Ställ läget till relativ, bredden till 800px och höjden till 510px. Applicera sedan några marginaler och vadderingar och se till att listestilen är inställd på ingen.
Det som du verkligen måste få rätt är överflödet. Ställ överskott-x för att döljas och överflödet-y för att bläddra så blir listan verkligen rullbar.
Nu när vi har de oordnade listformaten utarbetat, är det dags att borra ner och ställa in listobjektstilerna. Återigen ställer du in positionen (relativ), höjd (200px) och vaddering (20px). Ställ sedan in färgerna för bakgrunden och skriv, sätt övergången till auto och z-indexet till två.
Den knepiga delen här är den andra väljaren. Jag använder nth-barn (udda) för att variera färgen på varje annat listobjekt, vilket hjälper var och en att sticka ut från nästa. Detta stöds inte bra på IE, men det är inte heller Stroll.js så vi använder det ändå. Kom alltid ihåg att du kan använda Selectivizr för att öka ditt väljarsupport. I slutändan, om rullningseffekterna inte är brett stödda, är det inte så mycket (de är rent ögonljus), men du borde göra den andra visuella styling som cross-browser som möjligt.
Avstämning
Det mesta av vårt arbete är klart! Vår lista ser fantastisk ut, allt som är kvar att göra är att få det till liv med en liten bit av JavaScript. Det kommer inte att skada lite, jag lovar.
JavaScript
Nu lovade jag när vi startade det här projektet att du inte behövde känna till JavaScript för att fortsätta.Men här kastar jag JavaScript på dig! Vad ger? Sanningen är att du behöver en liten bit av JS, men en kopia och klistra in fungerar bara bra och det är lätt att anpassa för ditt projekt.
Kasta denna kod in i slutet av kroppen i din HTML.
Se? Det var inte så dåligt. Allt du behöver göra för att anpassa det är att du riktar in rätt ID. Vi använde? #Main? i vårt projekt idag, men gärna ändra det för dina egna användningar.
Det är levande!
Därmed är vi alla färdiga! Allt vi behöver göra för att ändra effekten gäller en annan klass på den oordnade listan. För demo använde jag flip-, curl- och tilt-effekterna.
demo: Klicka här för att starta.
Vad tror du?
Att tänka på hur man gör scrollevenemang mer intressanta öppnar ett helt nytt område av intressanta designmöjligheter. Som med någon effekt kan dessa användas för gott eller ont. Om du tar dem för långt eller missbrukar dem kommer det att resultera i en svimlande sida som ingen kommer att vilja använda. Använd Stroll.js sparsamt och det kommer att ha en mycket större effekt.
Lämna en kommentar och låt oss veta vad du tycker om Stroll.js. Gillar du rullningsanimationer eller vill du föredra att utvecklare slutar hitta nya platser för att hålla fler animeringar? Låt oss veta!