Bouw je eigen pagina scrollen effecten met Roll.js
Je vindt tientallen scrollende bibliotheken overal op het internet. De meeste zijn geschreven in JavaScript en hebben hun eigen effecten die u kunt restylen voor lay-outs van één pagina, on-scroll-animaties en nog veel meer.
Maar hoe zit het met coderen van je eigen scrolleffecten? Of wat als u gewoon een eenvoudige manier wilt om bij te houden hoe diep op de pagina een gebruiker heeft gescrold?
Roll.js is de bibliotheek waarnaar u op zoek bent. Deze open source script is gek klein en super eenvoudig te gebruiken. U kunt dit werken met een paar regels JavaScript. En het beste van alles, het dwingt je niet om iets specifieks te doen, maar eerder geeft je de tools om uw eigen aangepaste scrollfuncties te maken.
Het doel van deze bibliotheek is om ontwikkelaars te helpen hun scrolleffecten zonder veel moeite te structureren.
Als je de belangrijkste GitHub-repo bekijkt, vind je een hele installatiegids met enkele voorbeeldfragmenten. Jij kan voer functies uit om te bellen tot hoever de gebruiker scrolt, of naar anders “ruiten” op de pagina.
Deze werken het best op lay-outs met één pagina, maar u kunt Roll.js voor zoveel gebruiken.
Met een enkele functieaanroep kunt u gegevens ophalen met elke schuif die het volgende bevat:
- Totaal aantal paginastappen (indien van toepassing).
- Totale% gescrolde pagina.
- Huidige positie op pagina in pixels.
- Totale kijkvensterhoogte op basis van apparaatgrootte.
Dit werkt ook met jump-links die gebruikers naar beneden halen (of naar boven halen) naar bepaalde delen van de pagina.
Maar je kunt veel van deze functies ook in andere bibliotheken vinden. Wat maakt Roll.js zo speciaal?
Een deel daarvan is de syntaxis, maar de grote verkoper hier is de totale bibliotheekgrootte van 8KB wanneer geminimaliseerd. Dat is best erg klein voor zo'n gedetailleerde scrollbibliotheek!
Je kunt zien hoe dit werkt op de hoofd demopagina en je kunt zelfs download de Roll.js-broncode om zelf in die demo's te graven.
Alles van de live demo's en de onbewerkte bibliotheekbestanden kan uit GitHub worden gehaald en ze zijn supereenvoudig om mee te werken.
Maar als je vragen of suggesties hebt of je bedankt voor de geweldige bibliotheek, kun je een bericht schrijven naar de maker @williamngan.
