Byg din egen sidescrollingseffekt med Roll.js
Du kan finde snesevis af rullende biblioteker over hele nettet. De fleste er skrevet i JavaScript og har deres egne effekter, du kan restylle til enkelt side layouter, on-scroll animationer og så meget mere.
Men hvad med kodning af dine egne rullende effekter? Eller hvad hvis du bare vil have en enkel måde at spore, hvor langt ned på siden en bruger har rullet?
Roll.js er det bibliotek, du leder efter. Dette open source script er skør lille og super nem at bruge. Du kan få det til at fungere med et par linjer af JavaScript. Og bedst af alt det tvinge dig ikke til at udføre noget specifikt, men snarere giver dig værktøjerne at oprette dine egne brugerdefinerede scrollfunktioner.
Målet med dette bibliotek er at hjælpe udviklere med at strukturere deres rullende effekter uden stor indsats.
Hvis du kigger på det vigtigste GitHub repo, finder du en hel installationsguide med et par eksempler. Du kan Kør funktioner for at ringe, hvor langt brugeren ruller, eller til forskellige “ruder” på siden.
Disse fungerer bedst på enkeltsidelayouter, men du kan bruge Roll.js for så meget.
Med et enkelt funktionsopkald kan du trække data med hver rulle, der omfatter:
- Samlede sidetrin (hvis relevant).
- Total% rullet ned side.
- Nuværende position på siden i pixels.
- Samlet visningshøjde baseret på enhedens størrelse.
Dette fungerer også med jump links, der bringer brugerne ned (eller op) til bestemte dele af siden.
Men du kan også finde mange af disse funktioner i andre biblioteker. Hvad gør Roll.js så specielt?
En del af det er syntaksen, men den store sælger her er den samlede biblioteksstørrelse på 8KB når det er minificeret. Det er ret darn lille for et sådant detaljeret scrolling bibliotek!
Du kan se, hvordan dette virker på hoveddemosiden, og du kan endda download kildekode for Roll.js for at grave dig selv i demoerne.
Alt fra de levende demoer og de rå bibliotek filer kan hentes fra GitHub, og de er super nemme at arbejde med.
Men hvis du har spørgsmål, forslag eller ønsker at dele din tak for det fantastiske bibliotek, kan du skyde en besked til skaberen @williamngan.
