JavaScript-bibliotheken voor cool-scrolling-effecten
Een website-ontwerp komt tot leven met goed uitgevoerde animaties. Als u op zoek bent naar de juiste bibliotheken om effecten aan uw project toe te voegen, hier heb ik een lijst gemaakt van enkele bibliotheken die je kunt gebruiken om effecten te geven op basis van de scroll-gebeurtenis.
Wanneer een gebruiker naar beneden scrolt op uw webpagina, de actie kan worden ontworpen om een verscheidenheid aan animatie-opties te activeren zoals vervagende effecten, onscherpte, 3D, parallax en meer. Er zijn 25 JS-bibliotheken die u kunnen helpen om dat soort antwoorden in uw site-ontwerp te bereiken.
Scroll Reveal
Een bibliotheek die het gemakkelijk maakt om scrolanimaties toe te voegen voor zowel internet als mobiel. U kunt aangepaste versoepeling, 3D-rotaties, duur en veel meer parameters instellen voor het element dat u wilt animeren.
Bijgebouwen: geen | Grootte: 2.9kb | Licentie: MIT
Aniview
Een plug-in die samen met Animate.CSS werkt om de animaties alleen in te schakelen wanneer uw element in de viewport komt.
Bijgebouwen: jQuery | Grootte: 1kb | Licentie: N / A
Fade Into View
Een plug-in die het effect Fade in / out toevoegt aan elementen wanneer ze vooraf bepaalde viewports openen of sluiten.
Bijgebouwen: jQuery | Grootte: 3.81kb | Licentie: N / A
WAUW
WOW zal Animate.css-animaties onthullen tijdens scrolgebeurtenissen. U kunt de duur van de animatie, vertragingen, offsets en iteraties direct instellen op basis van de HTML-markup en vervolgens de klasse van het element bellen vanuit JS.
Bijgebouwen: Animate.css | Grootte: 8.23kb | Licentie: MIT
ScrollMagic
Deze plug-in toont een 'Magisch' effect wanneer een gebruiker de pagina scrolt. Het is perfect voor het animeren, vastzetten van een element of het schakelen tussen CSS-klassen, allemaal op basis van de schuifpositie. ScrollMagic kan samenwerken met GSAP en VelocityJS bij het maken van een animatiescène. Bekijk hier de volledige demo's.
Bijgebouwen: jQuery, GSAP, Velocity.js | Grootte: 16.9kb | Licentie: MIT
jScrollability
Met jScrollability kunt u afzonderlijke webpagina's maken met complexe op scrollen gebaseerde animaties. Bij de sroll van de gebruiker zal het element bewegen op basis van de schuifposities. Animaties worden uitgevoerd op basis van de schuifdiepte en u kunt natuurlijk het begin en einde van de animatie instellen.
Bijgebouwen: jQuery | Grootte: 1.86kb | Licentie: MIT
pushIn.js
Een eenvoudige bibliotheek om het dolly-in- of push-in-effect toe te voegen aan elk element dat werkt wanneer een gebruiker door de pagina scrolt. Het is eenvoudig te implementeren: voeg de begin-, stop- en snelheidsparameters toe aan data-params naar uw HTML-element.
Bijgebouwen: geen | Grootte: 4.94kb | Licentie: N / A
Scrollissimo
Dit is een JS-bibliotheek om vloeiende, door scrollen bestuurde animaties toe te voegen. Het maakt gebruik van de tweens en tijdlijnen van Greensock om vloeiendere animaties te genereren.
Bijgebouwen: GreenShock TweenLite / TweenMax | Grootte: 2.94kb | Licentie: N / A
jQuery-schuifplugin voor animaties
Dit is een jQuery-invoegtoepassing om via een kijkvenster gegenereerde animatie met Greensock toe te voegen. Het maakt het gemakkelijk om elementen te animeren met versnelling, transformatie, schaalverdeling, rotatie en 3D-animaties.
Bijgebouwen: jQuery, GreenShock | Grootte: 14kb | Licentie: GNU GPL
Circlr
Met Circlr kunt u de rotatie-animatie maken voor een element, geactiveerd door scrollen, muisgebeurtenissen of aanraakgebeurtenissen. Het is perfect om een etalage te maken van een product dat vanaf 360 graden kan worden bekeken, geactiveerd door de schuifbalk van de gebruiker.
Bijgebouwen: geen | Grootte: 6.05kb | Licentie: MIT
Scrollimator
Scrollimator toont u de positie en de voortgang van het bladeren en retourneert waarden die u kunt gebruiken om de tween-animaties te wijzigen die zijn gekoppeld aan het scrolgedrag van de gebruiker. Het ondersteunt verticaal en horizontaal scrollen.
Bijgebouwen: geen | Grootte: 37.7kb | Licentie: N / A
crossfade
Crossfade is een plug-in om het crossfade-effect aan een afbeelding toe te voegen. Het wazige effect gaat door als een gebruiker verder scrolt.
Bijgebouwen: jQuery | Grootte: 3.19kb | Licentie: MIT
Bladereffect op pagina
Deze is een bibliotheek voor experimentele pagina-scroll-effecten gemaakt door CodyHouse. Het maakt gebruik van velocitey.js animaties.
Bijgebouwen: jQuery, Velocity.js | Grootte: 17.6kb | Licentie: N / A
jquery.parallax-scroll
Met deze bibliotheek kunt u vloeiend een parallax-effect toevoegen aan het scrollen met verticale pagina's. Importeer jQuery en jQuery.easing.1.3.js en voeg de 'Data-parallax' attribuut en optionele patameters aan uw element om het effect aan te passen.
Bijgebouwen: jQuery, jQuery.easing | Grootte: 8.72kb | Licentie: GNU GPL
parallax.js
Parallax.js is een eenvoudige plug-in die het parallax-scrolleffect toevoegt, geïnspireerd door de Spotify-website.
Bijgebouwen: jQuery | Grootte: 6.63kb | Licentie: MIT
Enllax
Enllax is een superlichte bibliotheek voor gebruik bij het toepassen van het parallax-effect op elk schuifelement. U kunt achtergrond- of voorgrondelementen instellen op een effect. Het werkt zowel voor verticaal als horizontaal scrollen.
Bijgebouwen: jQuery | Grootte: 1.53kb | Licentie: MIT
Vervaging op scrollen
Met deze bibliotheek kunt u het vervagingseffect toevoegen aan een afbeelding, die wordt geactiveerd door scrollen op de pagina. Hoe dieper u over de pagina bladert, hoe waziger de afbeelding wordt.
Bijgebouwen: geen | Grootte: 1.1kb | Licentie: N / A
boxLoader
boxLoader is een eenvoudige plug-in om elementen op de pagina te laten scrollen. De parameter die u moet instellen, zijn de richtingen (x of y), positie op percentage, effect en ook duur.
Bijgebouwen: jQuery | Grootte: 3.42kb | Licentie: N / A
Gekantelde paginarol
Terwijl een gebruiker door een pagina scrolt, onthult deze plug-in een geweldig 3D gekanteld effect op het element dat u hebt ingesteld.
Bijgebouwen: jQuery | Grootte: 1.5kb | Licentie: GNU GPL
AhRelax
AhRelax biedt een manier om snel op scrollen gebaseerde animaties te maken. Hij is licht en heeft ook geweldige prestaties. Je kunt hier meer over lezen.
Bijgebouwen: jQuery | Grootte: 1.6kb | Licentie: MIT
Fancy Scroll
Als je ooit het overloop-scroll-effect ziet op Android of iOS, kun je deze plug-in nu toepassen op je site. U kunt een animatie, een bounce of een glow, toevoegen wanneer een gebruiker de bovenkant / onderkant van de pagina bereikt.
Bijgebouwen: jQuery | Grootte: 2.64kb | Licentie: GNU GPL
Parallax afbeelding scrollen
Deze plug-in zorgt ervoor dat elementen zweven en bewegen als een gebruiker naar beneden of naar boven scrolt.
Bijgebouwen: jQuery | Grootte: 8.69kb | Licentie: MIT
Rlsmooth
Dit is een kleine plug-in om het vloeiende effect te creëren wanneer een gebruiker de pagina naar beneden of naar boven scant. Er zijn drie effecten beschikbaar: dia, fade en show.
Bijgebouwen: jQuery | Grootte: 1.95kb | Licentie: MIT
Scrollme
Voegt eenvoudige effecten toe aan scrollen op pagina's, zoals schaal, roteren, vertalen en de dekking van elementen wijzigen. Het is eenvoudig in te stellen: importeer gewoon de jQuery, deze plug-in, en stel de animatieparameters in op de opmaak van het element.
Bijgebouwen: jQuery | Grootte: 5.45kb | Licentie: N / A
Parallax ImageScroll
Met deze plug-in kunt u een parallax-effect geven aan elke afbeelding op uw pagina. Het maakt gebruik van CSS3 Transform om het effect te laten werken. Deze plug-in heeft ondersteuning voor jQuery en AMD.
Bijgebouwen: jQuery | Grootte: 8.01kb | Licentie: MIT
