Bibliothèques JavaScript pour des effets de défilement sympas
Une conception 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, voici une liste de certaines bibliothèques vous pouvez utiliser pour donner des effets basés sur l'événement de défilement.
Lorsqu'un utilisateur fait défiler votre page Web, l'action peut être conçu pour déclencher diverses options d'animation tels que les effets de fondu, le flou, la 3D, la parallaxe, etc. Il existe 25 bibliothèques JS ici qui peuvent vous aider à obtenir ce type de réponse dans la conception de votre site..
Scroll Reveal
Une bibliothèque qui facilite l'ajout d'animations de défilement pour le Web et les mobiles. Vous pouvez définir des accélérations personnalisées, des rotations 3D, une durée et de nombreux autres paramètres sur l'élément que vous souhaitez animer..
Les 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..
Les dépendances: jQuery | Taille: 1kb | Licence: N / A
Fondu à la vue
Un plugin qui ajoute l'effet de fondu entrant / sortant aux éléments lorsqu'ils entrent ou sortent des fenêtres de vues prédéterminées.
Les dépendances: jQuery | Taille: 3.81kb | Licence: N / A
SENSATIONNEL
WOW révélera des animations Animate.css lors d'un é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 simplement appeler la classe de l'élément depuis JS.
Les dépendances: Animate.css | Taille: 8.23kb | Licence: MIT
ScrollMagic
Ce plugin affichera un effet "Magique" lorsqu'un utilisateur fera défiler la page. Il est idéal pour animer, épingler un élément ou basculer une classe CSS, le tout en fonction de la position du défilement. ScrollMagic peut travailler avec GSAP et VelocityJS pour créer une scène d'animation. Voir les démos complètes ici.
Les dépendances: jQuery, GSAP, Velocity.js | Taille: 16.9kb | Licence: MIT
jScrollability
jScrollability vous permet de créer des pages Web uniques avec des animations complexes à base de défilement. Une fois l'utilisateur inscrit, l'élément s'anime en fonction des positions de défilement. Les animations sont exécutées en fonction de la profondeur de défilement et vous pouvez bien sûr définir le début et la fin de l'animation..
Les dépendances: jQuery | Taille: 1.86kb | Licence: MIT
pushIn.js
Une bibliothèque simple permettant d’ajouter l’effet dolly-in ou push-in à n’importe quel élément qui fonctionne lorsqu'un utilisateur fait défiler la page. C’est simple à mettre en œuvre: il suffit d’ajouter les paramètres de démarrage, d’arrêt et de vitesse paramètres de données à votre élément HTML.
Les dépendances: aucun | Taille: 4.94kb | Licence: N / A
Scrollissimo
Ceci est une bibliothèque JS pour ajouter des animations lisses contrôlées par le défilement. Il utilise les tweens et les timelines de Greensock pour générer des animations plus fluides.
Les dépendances: GreenShock TweenLite / TweenMax | Taille: 2.94kb | Licence: N / A
jQuery Animation Scroll Plugin
Ceci est un plugin jQuery pour ajouter une animation déclenchée par une fenêtre d'affichage à l'aide de Greensock. Il est facile d'animer des éléments avec des animations simplifiées, transformées, redimensionnées, en rotation et 3D..
Les dépendances: jQuery, GreenShock | Taille: 14kb | Licence: GNU GPL
Circlr
Circlr vous permet de créer l'animation de rotation d'un élément déclenchée par un défilement, des événements de souris ou des événements tactiles. Idéal pour présenter un produit visible à 360 degrés, activé par le défilement de l'utilisateur..
Les dépendances: aucun | Taille: 6.05kb | Licence: MIT
Scrollimator
Scrollimator vous montrera la position et la progression du défilement, et renverra des valeurs que vous pourrez utiliser pour modifier les animations interpolées associées au comportement de défilement de l'utilisateur. Il prend en charge le défilement vertical et horizontal.
Les dépendances: aucun | Taille: 37.7kb | Licence: N / A
Fondu enchaîné
Crossfade est un plugin pour ajouter l'effet de fondu enchaîné à une image. L'effet flou se poursuivra au fur et à mesure que l'utilisateur fera défiler l'écran.
Les 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.js des animations.
Les 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 lisse au défilement vertical des pages. Importez simplement jQuery et jquery.easing.1.3.js, puis ajoutez le 'parallaxe de données' attribuez et des patameters optionnels à votre élément pour personnaliser l'effet.
Les dépendances: jQuery, jQuery.easing | Taille: 8.72kb | Licence: GNU GPL
parallax.js
Parallax.js est un simple plugin qui ajoute l'effet de défilement de parallaxe, inspiré du site Web Spotify..
Les 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 à tout élément de défilement. Vous pouvez définir des éléments d’arrière-plan ou d’avant-plan pour obtenir cet effet. Cela fonctionne pour le défilement vertical et horizontal.
Les dépendances: jQuery | Taille: 1.53kb | Licence: MIT
Flou sur le défilement
Cette bibliothèque vous aide à ajouter l'effet de flou à une image, ce qui sera déclenché par le défilement de page. Plus vous faites défiler la page, plus l'image est floue..
Les dépendances: aucun | Taille: 1.1kb | Licence: N / A
boxLoader
boxLoader est un simple plugin pour charger des éléments lors du défilement d'une page. Les paramètres à définir sont les directions (x ou y), la position sur le pourcentage, l’effet et la durée..
Les dépendances: jQuery | Taille: 3.42kb | Licence: N / A
Défilement de page incliné
Lorsqu'un utilisateur fait défiler une page, ce plugin révélera un effet 3D impressionnant et incliné à l'élément que vous avez configuré..
Les dépendances: jQuery | Taille: 1.5kb | Licence: GNU GPL
AhRelax
AhRelax fournit un moyen de créer rapidement des animations à base de défilement. Il est léger et offre également d'excellentes performances. Vous pouvez en lire plus ici.
Les dépendances: jQuery | Taille: 1.6kb | Licence: MIT
Scroll Fantaisie
Si jamais vous voyez l'effet de défilement de débordement sur Android ou iOS, vous pouvez maintenant appliquer ce plugin à votre site. Vous pouvez ajouter une animation, que ce soit un rebond ou une lueur, lorsqu'un utilisateur atteint le haut / le bas de la page..
Les dépendances: jQuery | Taille: 2,64 Ko | Licence: GNU GPL
Défilement d'image de parallaxe
Ce plugin va faire flotter des éléments et se déplacer comme un utilisateur fait défiler vers le bas ou vers le haut de la page.
Les dépendances: jQuery | Taille: 8.69kb | Licence: MIT
Rlsmooth
Ceci est un petit plugin pour créer l'effet fluide lorsqu'un utilisateur se promène en bas ou en haut de la page. Il y a trois effets disponibles: slide, fade et show.
Les dépendances: jQuery | Taille: 1.95kb | Licence: MIT
Scrollme
Ajoute des effets simples au défilement de page tels que redimensionner, faire pivoter, traduire et changer l'opacité des éléments. L'installation est simple: il suffit d'importer le jQuery, ce plugin, et de définir les paramètres d'animation sur le balisage de l'élément..
Les dépendances: jQuery | Taille: 5.45kb | Licence: N / A
Parallaxe ImageScroll
Ce plugin vous permet de donner un effet de parallaxe à n’importe quelle image sur votre page. Il utilise CSS3 Transform pour que l’effet fonctionne. Ce plugin supporte jQuery et AMD.
Les dépendances: jQuery | Taille: 8.01kb | Licence: MIT
