Bibliothèques JavaScript pour des Effets de défilement Sympas

Un design de site Web prend vie avec une animation bien exécutée. Si vous recherchez les bibliothèques appropriées pour ajouter des effets à votre projet, j’ai fait ici une liste de certaines des bibliothèques que vous pouvez utiliser pour donner des effets en fonction de l’événement de défilement.

Lorsqu’un utilisateur fait défiler votre page Web, l’action peut être conçue pour déclencher diverses options d’animation telles que les effets de fondu, le flou, la 3D, la parallaxe, etc. Il y a 25 bibliothèques JS ici qui peuvent vous aider à obtenir ce genre de réponse dans la conception de votre site.

En savoir plus: 15 exemples de défilement bien fait dans la conception de sites Web

Scroll Reveal

Une bibliothèque qui facilite l’ajout d’animations de défilement pour le web et les mobiles. Vous pouvez définir l’assouplissement personnalisé, les rotations 3D, la durée et de nombreux paramètres mor sur l’élément que vous souhaitez animer.

Dépendances: aucun | Taille: 2.9kb / Licence: MIT

Aniview

Un plugin qui fonctionne avec Animate.CSS pour activer les animations uniquement lorsque votre élément entre dans la fenêtre d’affichage.

Dépendances : jQuery / Taille: 1 Ko / Licence : N/A

Fade Into View

Un plugin qui ajoute l’effet fade in/out aux éléments lorsqu’ils entrent ou sortent des fenêtres d’affichage prédéterminées.

Dépendances: jQuery / Taille: 3.81kb | Licence: N/A

WOW

WOW révélera Animate.animations css lors de l’événement de défilement. Vous pouvez configurer la durée de l’animation, les retards, les décalages et les itérations directement à partir du balisage HTML, puis appeler simplement la classe de l’élément à partir de JS.

Dépendances : Animer.css / Taille : 8.23kb / Licence : MIT

ScrollMagic

Ce plugin affiche un effet « magique » lorsqu’un utilisateur fait défiler la page. Il est parfait pour animer, épingler un élément ou basculer une classe CSS, le tout en fonction de la position de défilement. ScrollMagic peut travailler avec GSAP et VelocityJS pour créer une scène d’animation. Voir les démos complètes ici.

Dépendances: jQuery, GSAP, Vélocité.js / Taille: 16.9kb / Licence: MIT

jScrollability

jScrollability vous permet de créer des pages Web uniques avec des animations complexes basées sur le défilement. Lors du défilement de l’utilisateur, l’élément s’animera en fonction des positions de défilement. Les animations s’exécutent en fonction de la profondeur de défilement, et bien sûr, vous pouvez définir le début et la fin de l’animation.

Dépendances: jQuery / Taille: 1.86kb / Licence: MIT

pushIn.js

Une bibliothèque simple pour ajouter l’effet dolly-in ou push-in à tout élément qui fonctionne lorsqu’un utilisateur fait défiler la page. C’est facile à implémenter: ajoutez simplement les paramètres start, stop et speed à data-params à votre élément HTML.

Dépendances : aucun | Taille : 4.94kb / Licence : N/A

Scrollissimo

Il s’agit d’une bibliothèque JS pour ajouter des animations contrôlées par défilement fluides. Il utilise les préadolescents et les chronologies de Greensock pour générer des animations plus fluides.

Dépendances : GreenShock TweenLite/TweenMax/Taille: 2.94 Ko | Licence : S.O.

Plugin jQuery Animation Scroll

Il s’agit d’un plugin jQuery pour ajouter une animation déclenchée par la fenêtre d’affichage à l’aide de Greensock. Il facilite l’animation d’éléments avec des animations d’assouplissement, de transformation, d’échelle, de rotation et 3D.

Dépendances : jQuery, GreenShock / Taille : 14 Ko / Licence : GNU GPL

Circlr

Circlr vous permet de créer l’animation de rotation d’un élément, déclenchée par le défilement, les événements de la souris ou les événements tactiles. Il est parfait pour faire une vitrine d’un produit qui peut être visualisé à 360 degrés, activé par le défilement de l’utilisateur.

Dépendances : aucun | Taille : 6.05kb / Licence : MIT

Scrlimator

Scrlimator vous montrera la position et la progression du défilement, et renverra des valeurs que vous pouvez utiliser pour modifier les animations interpolées attachées au comportement de défilement de l’utilisateur. Il prend en charge le défilement vertical et horizontal.

Dépendances : aucune / Taille : 37.7kb / Licence: N/A

Crossfade

Crossfade est un plugin pour ajouter l’effet crossfade à une image. L’effet flou se poursuivra lorsqu’un utilisateur défilera plus bas.

Dépendances : jQuery / Taille : 3.19kb / Licence: MIT

Effet de défilement de page

Celui-ci est une bibliothèque d’effets de défilement de page expérimentaux créés par CodyHouse. Il utilise velocitey.animations js.

Dépendances : jQuery, Velocity.js / Taille: 17.6kb / Licence: N/A

jquery.parallax-scroll

Cette bibliothèque vous permet d’ajouter un effet de parallaxe fluide au défilement vertical de la page. Importez simplement jQuery et jquery.soulager.1.3.js, puis ajoutez l’attribut 'data-parallax' et les patamètres facultatifs à votre élément pour personnaliser l’effet.

Dépendances : jQuery, jQuery.assouplissement | Taille : 8.72kb / Licence : GNU GPL

parallaxe.js

Parallaxe.js est un plugin simple qui ajoute l’effet de défilement de parallaxe, inspiré du site web Spotify.

Dépendances : jQuery / Taille : 6.63kb / Licence: MIT

Enllax

Enllax est une bibliothèque super légère à utiliser pour appliquer l’effet de parallaxe à n’importe quel élément de défilement. Vous pouvez définir des éléments d’arrière-plan ou de premier plan sur l’effet hav ethis. Cela fonctionne pour le défilement vertical et horizontal.

Dépendances: jQuery / Taille: 1.53kb / Licence: MIT

Flou au défilement

Cette bibliothèque vous aide à ajouter l’effet de flou à une image, qui sera déclenché par le défilement de la page. Plus vous faites défiler la page, plus l’image devient floue.

Dépendances : aucun / Taille : 1.1kb / Licence : N/A

boxLoader

boxLoader est un plugin simple pour charger des éléments lors du défilement de la page. Les paramètres que vous devez définir sont les directions (x ou y), la position sur le pourcentage, l’effet et la durée.

Dépendances : jQuery / Taille : 3.42kb / Licence: N/A

Défilement de la page inclinée

Lorsqu’un utilisateur fait défiler une page, ce plugin révélera un effet 3D incliné impressionnant sur l’élément que vous avez configuré.

Dépendances : jQuery / Taille : 1.5kb / Licence : GNU GPL

AhRelax

AhRelax fournit un moyen de créer des animations rapides basées sur le défilement. Il est léger et a également de grandes performances. Vous pouvez en savoir plus à ce sujet ici.

Dépendances : jQuery / Taille : 1.6kb / Licence: MIT

Fancy Scroll

Si jamais vous voyez l’effet de défilement de débordement sur Android ou iOS, avec ce plugin, vous pouvez maintenant l’appliquer à votre site. Vous pouvez ajouter une animation, un rebond ou une lueur, lorsqu’un utilisateur atteint le haut /bas de la page.

Dépendances : jQuery / Taille: 2.64kb / Licence : GNU GPL

Parallax image scroll

Ce plugin fera flotter et déplacer des éléments au fur et à mesure qu’un utilisateur défile vers le bas ou vers le haut de la page.

Dépendances : jQuery / Taille : 8.69kb / Licence: MIT

Rlsmooth

Il s’agit d’un petit plugin pour créer l’effet fluide lorsqu’un utilisateur gronde vers le bas ou vers le haut de la page. Trois effets sont disponibles: diapositive, fondu et spectacle.

Dépendances : jQuery / Taille : 1.95kb / Licence: MIT

Scrollme

Ajoute des effets simples au défilement de la page tels que l’échelle, la rotation, la traduction et la modification de l’opacité des éléments. C’est facile à configurer: il suffit d’importer le jQuery, ce plugin, et de définir les paramètres d’animation sur le balisage de l’élément.

Dépendances : jQuery / Taille : 5.45kb / Licence : N/A

Parallax ImageScroll

Ce plugin vous permet de donner un effet de parallaxe à n’importe quelle image de votre page. Il utilise la transformation CSS3 pour faire fonctionner l’effet. Ce plugin prend en charge jQuery et AMD.

Dépendances : jQuery / Taille : 8.01kb / Licence: MIT