Bygg din egen side rullende effekter med Roll.js
Du kan finne dusinvis av rullende biblioteker over hele nettet. De fleste er skrevet i JavaScript og har egne effekter du kan restylle for enkle sidelayouter, on-scroll animasjoner og så mye mer.
Men hva med koding av egne rullingseffekter? Eller hva om du bare vil ha en enkel måte å spore hvor langt nedover siden har en bruker rullet?
Roll.js er biblioteket du leter etter. Dette åpen kildekode er gal liten og super enkel å bruke. Du kan få dette til å fungere med noen få linjer med JavaScript. Og best av alt tvinger du ikke til å utføre noe spesifikt, men heller gir deg verktøyene å lage dine egne tilpassede rullingsfunksjoner.
Målet med dette biblioteket er å hjelpe utviklere å strukturere sine rullende effekter uten mye anstrengelse.
Hvis du ser på hovedgitHub-repo, finner du en hel oppsettguide med noen få eksempler. Du kan Kjør funksjoner for å ringe hvor langt brukeren ruller, eller til annerledes “ruter” på siden.
Disse fungerer best på enkeltsideoppsett, men du kan bruke Roll.js for så mye.
Med et enkeltfunksjonsanrop kan du trekke data med hver rulle som inkluderer:
- Totalt antall trinn (hvis aktuelt).
- Totalt% rullet ned side.
- Nåværende posisjon på side i piksler.
- Total visningsporthøyde basert på enhetsstørrelse.
Dette fungerer også med hoppekoblinger som bringer brukere ned (eller opp) til bestemte deler av siden.
Men du kan også finne mange av disse funksjonene i andre biblioteker. Hva gjør Roll.js så spesiell?
En del av det er syntaksen, men den store selgeren her er den totale biblioteksstørrelsen på 8KB når minifisert. Det er ganske darn lite for et så detaljert rullingsbibliotek!
Du kan se hvordan dette fungerer på hoveddemosiden, og du kan til og med last ned kildekoden Roll.js for å grave deg inn i demoene selv.
Alt fra levende demoer og råbiblioteksfiler kan hentes fra GitHub, og de er veldig enkle å jobbe med.
Men hvis du har noen spørsmål, forslag eller ønsker å dele takk for det fantastiske biblioteket, kan du skyte en melding til skaperen @williamngan.
