JavaScript-bibliotheken voor coole scroll-effecten

een website-ontwerp komt tot leven met goed uitgevoerde animatie. Als je op zoek bent naar de juiste bibliotheken om effecten aan je project toe te voegen, heb ik hier een lijst gemaakt van enkele bibliotheken die je kunt gebruiken om effecten te geven op basis van de scroll-gebeurtenis.

wanneer een gebruiker door uw webpagina scrolt, kan de actie worden ontworpen om een verscheidenheid aan animatieopties te activeren, zoals fade-effecten, vervagen, 3D, parallax en meer. Er zijn 25 js bibliotheken hier die u kunnen helpen bij het bereiken van dat soort reactie in uw site ontwerp.

Lees meer: 15 voorbeelden van goed scrollen in websiteontwerp

Scroll Reveal

een bibliotheek die het eenvoudig maakt om scrollanimatie toe te voegen voor zowel web als mobiel. U kunt aangepaste versoepeling, 3D-rotaties, duur en vele Mor parameters instellen op het element dat u wilt animeren.

afhankelijkheden: geen / Grootte: 2.9 kb | Licentie: MIT

Aniview

een plugin die samen met Animate werkt.CSS om de animaties alleen in te schakelen wanneer uw element in viewport komt.

afhankelijkheden: jQuery / grootte: 1kb / Licentie: N / A

Fade Into View

een plugin die het fade in / out effect toevoegt aan elementen wanneer ze vooraf bepaalde viewports invoeren of afsluiten.

afhankelijkheden: jQuery / grootte: 3.81 kb | Licentie: N/A

WOW

WOW zal animatie tonen.CSS animaties op scroll event. U kunt de animatieduur, vertragingen, offsets en iteraties direct vanaf de HTML-opmaak instellen, en vervolgens de klasse van het element vanuit JS aanroepen.

Afhankelijkheden: Animate.css / grootte: 8.23 kb / Vergunning: MIT

ScrollMagic

deze plugin toont een ‘magisch’ effect wanneer een gebruiker de pagina schuift. Het is perfect voor het animeren, pinning een element, of schakelen CSS klasse, allemaal op basis van scroll positie. ScrollMagic kan samenwerken met GSAP en VelocityJS bij het maken van een animatiescène. Bekijk hier de complete demo ‘ s.

afhankelijkheden: jQuery, GSAP, snelheid.js / Size: 16.9 kb / Licence: MIT

jScrollability

jScrollability laat u afzonderlijke webpagina ‘ s maken met complexe scrollgebaseerde animaties. Wanneer de gebruiker sroll, het element zal animeren op basis van de scroll posities. Animaties worden uitgevoerd op basis van de scrolldiepte, en natuurlijk kunt u het begin en einde van de animatie instellen.

afhankelijkheden: jQuery / grootte: 1.86 kb | 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 gewoon de start -, stop-en snelheidsparameters toe aan data-params aan uw HTML-element.

afhankelijkheden: geen / grootte: 4.94 kb / Licentie: N / A

Scrollissimo

Dit is een js-bibliotheek om vloeiende scrollgestuurde animaties toe te voegen. Het maakt gebruik van de Greensock ‘ s tweens en tijdlijnen om soepeler animaties te genereren.

Afhankelijkheden: GreenShock TweenLite / TweenMax / Size: 2.94kb / Vergunning: N / A

jQuery Animation Scroll Plugin

Dit is een jQuery plugin om viewport-getriggerde animatie toe te voegen met behulp van Greensock. Het maakt het gemakkelijk om elementen te animeren met easing, transformeren, schalen, rotatie en 3D-animaties.

afhankelijkheden: jQuery, GreenShock / grootte: 14kb / Licentie: GNU GPL

Circlr

met Circlr kunt u de rotatieanimatie naar een element maken, geactiveerd door scrollen, muisgebeurtenissen of aanraakgebeurtenissen. Het is perfect om een showcase te maken van een product dat kan worden bekeken vanaf alle 360 graden, geactiveerd door de gebruiker scroll.

afhankelijkheden: geen / grootte: 6.05 kb / Licentie: MIT

Scrollimator

Scrollimator toont u de positie en scrolprogressie, en geeft waarden terug die u kunt gebruiken om tussen animaties te wijzigen die zijn gekoppeld aan het scrolgedrag van de gebruiker. Het ondersteunt verticaal en horizontaal scrollen.

afhankelijkheden: geen / Grootte: 37.7 kb / Licentie: N. v. t.

Crossfade

Crossfade is een plugin om het crossfade-effect aan een afbeelding toe te voegen. Het wazige effect zal doorgaan als een gebruiker verder naar beneden scrolt.

afhankelijkheden: jQuery / grootte: 3.19 kb / Licentie: MIT

Page Scroll Effect

Dit is een bibliotheek voor experimentele pagina scroll effecten gemaakt door CodyHouse. Het maakt gebruik van velocitey.js animaties.

afhankelijkheden: jQuery, Velocity.js | Grootte: 17.6 kb / Licentie: n. v. t.

jquery.parallax-scroll

in deze bibliotheek kunt u een vloeiende parallax-effect toevoegen aan het verticale pagina-scrollen. Importeer jQuery en jquery.verlichten.1.3.js, voeg dan het 'data-parallax' attribuut en optionele patameters toe aan uw element om het effect aan te passen.

afhankelijkheden: jQuery, jQuery.easing / Size: 8.72 kb / Licentie: GNU GPL

parallax.js

Parallax.js is een eenvoudige plugin die het parallax scrolling-effect toevoegt, geà nspireerd door de Spotify-website.

afhankelijkheden: jQuery / grootte: 6.63 kb / Licentie: MIT

Enllax

Enllax is een super lichtgewicht bibliotheek voor gebruik bij het toepassen van het parallax effect op elk scrolling element. U kunt achtergrond-of voorgrond-elementen instellen op hav ethis-effect. Het werkt voor zowel verticaal als horizontaal scrollen.

afhankelijkheden: jQuery / grootte: 1.53 kb | Licentie: MIT

vervagen op scroll

deze bibliotheek helpt u om het vervagen-effect toe te voegen aan een afbeelding, die wordt geactiveerd door het bladeren door pagina ‘ s. Hoe dieper je naar beneden scrolt, hoe meer wazig het beeld wordt.

afhankelijkheden: geen / Grootte: 1.1 kb / Licentie: N / A

boxLoader

boxLoader is een eenvoudige plugin om elementen te laden bij het bladeren door pagina ‘ s. De parameter die u moet instellen zijn de richtingen (x of y), positie op procent, effect en ook de duur.

afhankelijkheden: jQuery / grootte: 3.42 kb / Licentie: N. v. t.

als een gebruiker door een pagina scrolt, zal deze plugin een geweldig 3D gekanteld effect onthullen aan het element dat u hebt ingesteld.

afhankelijkheden: jQuery / Grootte: 1.5 kb / Licentie: GNU GPL

AhRelax

AhRelax biedt een manier om snel scrollgebaseerde animaties te maken. Het is lichtgewicht en heeft ook geweldige prestaties. U kunt hier meer over lezen.

afhankelijkheden: jQuery / Grootte: 1.6 kb / Licentie: MIT

Fancy Scroll

Als u ooit het overflow scroll effect op Android of iOS, met deze plugin kunt u dit nu toepassen op uw site. U kunt een animatie toevoegen, hetzij een bounce of glow, wanneer een gebruiker de bovenkant/onderkant van de pagina bereikt.

afhankelijkheden: jQuery / grootte: 2.64 kb | Licentie: GNU GPL

Parallax image scroll

deze plugin zal elementen zweven en verplaatsen terwijl een gebruiker de pagina omlaag of omhoog schuift.

afhankelijkheden: jQuery / grootte: 8.69 kb / Licentie: MIT

Rlsmooth

Dit is een kleine plugin om het vloeiende effect te creëren wanneer een gebruiker naar beneden of boven de pagina scolls. Er zijn drie effecten beschikbaar: slide, fade en show.

afhankelijkheden: jQuery / grootte: 1.95 kb / Licentie: MIT

Scrollme

voegt eenvoudige effecten toe aan pagina-scrollen, zoals schalen, roteren, vertalen en het veranderen van de opaciteit van elementen. Het is eenvoudig te installeren: importeer gewoon de jQuery, deze plugin, en stel de animatie parameters op het element opmaak.

afhankelijkheden: jQuery / grootte: 5.45 kb / Licentie: N / A

Parallax ImageScroll

met deze plugin kunt u een parallax-effect geven aan elke afbeelding op uw pagina. Het maakt gebruik van CSS3 transformeren om het effect te laten werken. Deze plugin heeft ondersteuning voor jQuery en AMD.

afhankelijkheden: jQuery / grootte: 8.01 kb / Licentie: MIT