Partage d'outils front-end : 27 bibliothèques d'animations pour améliorer l'expérience utilisateur et la beauté des pages !

Cet article résume et partage 27 bibliothèques d'animation frontales pour rendre vos interactions plus cool, améliorer l'expérience utilisateur et la beauté des pages. J'espère qu'il sera utile à tout le monde !

Souvent, lorsque nous développons des pages frontales, nous réaliserons des effets d'animation pour améliorer l'expérience utilisateur et la beauté de la page, c'est pourquoi aujourd'hui je vous recommanderai quelques bibliothèques d'animation JavaScript utiles. [Recommandations associées : Tutoriel d'apprentissage Javascript]

Animate.css

animate.css est une collection CSS d'effets d'animation produits à l'aide de l'animation CSS3. Il contient de nombreux préréglages d'animations couramment utilisés et est très simple à utiliser.

GitHub : https://github.com/animate-css/animate.css

Hover.css

Hover.css est un ensemble d'effets et d'animations de survol de la souris basés sur CSS3, ceux-ci peuvent être très facilement appliqué aux boutons, logos, images et autres éléments. Tous ces effets ne nécessitent qu'une seule balise, utilisant des pseudo-éléments avant et après si nécessaire. Parce qu'il utilise des transitions, des transitions et des effets d'animation CSS3, il n'est pris en charge que dans les navigateurs modernes tels que Chrome, Firefox et Safari.

Github : https://github.com/IanLunn/Hover

Magic.css

L'animation Magic CSS3 Animations est un package d'effets spéciaux d'animation CSS3 unique qui peut être utilisé librement dans les pages Web. Introduisez simplement le fichier CSS sur la page : magic.css ou la version compressée magic.min.css et il est prêt à l'emploi.

Github : https://github.com/miniMAC/magic

React Spring

react-spring est une bibliothèque d'animation basée sur la physique du printemps qui répond à la plupart des besoins d'animation liés à l'interface utilisateur, fournissant des outils Get qui sont suffisamment flexibles pour projeter en toute confiance des idées dans des interfaces en constante évolution. Cette bibliothèque représente une approche moderne de l'animation. Il hérite de la puissante interpolation et des performances de l'animation et de la facilité d'utilisation de React-Motion.

GitHub : https://github.com/pmndrs/react-spring

React Reveal

React Reveal est une bibliothèque d'animation hautes performances pour React. Il a un faible encombrement et est écrit spécifiquement pour React dans ES6. Peut être utilisé pour créer une variété d’affichages d’effets de défilement sympas.

GitHub : https://github.com/rnosov/react-reveal

Greensock

GreenSock est une bibliothèque d'animation JavaScript qui facilite l'animation d'éléments HTML. Utilisé pour créer des animations multi-navigateurs hautes performances et sans dépendance, prétendument utilisées dans plus de 4 millions de sites Web. Il présente les caractéristiques suivantes :

• Il est rapide et possède des performances d'animation spécialement optimisées pour obtenir le même effet d'animation hautes performances que CSS.
• Léger et modulaire. La structure modulaire et plug-in maintient le moteur de base léger et le package TweenLite est très petit (essentiellement moins de 7 Ko). Il fournit des modules d'animation avec différentes fonctions telles que TweenLite, TimelineLite, TimelineMax et TweenMax, que vous pouvez utiliser selon vos besoins.
• Aucune dépendance.
• Contrôle flexible. Au lieu d'être limitées à des séquences linéaires, les séquences d'animation peuvent se chevaucher, ce qui permet un contrôle précis du timing et la flexibilité d'animer avec un minimum de code.
• Tout objet peut être animé.

Github : https://github.com/greensock/GreenSock-JS/

Velocity.js

Velocity.js est l'implémentation javascript de la syntaxe du modèle de vitesse. Velocity est un moteur de modèles basé sur Java largement utilisé dans diverses filiales du groupe Alibaba. Les modèles Velocity conviennent à un grand nombre de scénarios d'utilisation de modèles et prennent en charge des opérations logiques complexes, notamment des fonctions telles que les types de données, les affectations de variables et les fonctions. Il possède également des fonctionnalités spéciales telles que : animation couleur, transformations, boucle, assouplissement, animation SVG et animation de défilement. Velocity.js prend en charge Node.js et les environnements de navigateur.

Il présente les caractéristiques suivantes :

• Prend en charge l'utilisation côté client et côté serveur
• La syntaxe est riche en logique et constitue un langage miniature
• Séparation de l'analyse syntaxique et du rendu des modèles
• Prend essentiellement en charge entièrement la syntaxe de vitesse
• L'utilisation du navigateur prend en charge la référence mutuelle entre les modèles, basé sur le mécanisme de chargement du module kissy

GitHub : http://github.com/julianshapiro/velocity

Lax.js

Lax.js est un plug-in d'animation JavaScript natif sans dépendance qui permet la page slide. , ce plug-in est très léger, la version compressée ne fait que 3 Ko. Lorsque vous faites glisser la page, cela permet de créer des effets d'animation sympas, tels que la parallaxe de défilement, le mouvement de déformation et d'autres effets d'animation de base. En termes de compatibilité réactive, il prend également en charge les téléphones mobiles. En plus d'utiliser les attributs d'animation par défaut intégrés par le plug-in, vous pouvez également personnaliser des attributs d'animation plus riches.

GitHub : https://github.com/alexfoxy/lax.js

Rellax.js

rellax.js est un plug-in léger d'effets spéciaux de différence visuelle de défilement JavaScript pur. La version compressée de rellax.js ne fait que 871 octets. Dans les appareils à petit écran tels que les téléphones mobiles, le plug-in limitera automatiquement la fonctionnalité de différence visuelle.

Github : https://github.com/dixonandmoe/rellax

three.js

three.js est une bibliothèque 3D JavaScript universelle, légère et multi-navigateurs, facile à utiliser et qui est un ensemble de bibliothèques de fonctions Javascript développées sur la base de WebGL. Il fournit une API Javascript plus simple que WebGL, permettant aux développeurs de créer facilement des dessins 3D dans le navigateur.

GitHub : https://github.com/mrdoob/trois.js/

wow.js

WOW.js est un plug-in qui vous aide à déclencher des effets d'animation CSS lors du défilement de la page. Il s'appuie sur animate.css, il prend donc en charge plus de 60 effets d'animation d'animate.css. Vous pouvez modifier les paramètres d'animation selon votre style, délai, longueur, décalage et itération préférés, etc., pour répondre à divers besoins.

GitHub : https://github.com/graingert/wow

AniJS

AniJS nous permet de créer des styles animés pour notre site Web sans aucun codage JavaScript ou CSS ! Vous pouvez spécifier toutes les animations en HTML en utilisant la syntaxe simple If - On - Do - To

GitHub : https://github.com/anijs/anijs

Anime. js

Anime.js est une bibliothèque d'animation JavaScript légère avec une API simple et puissante. Les propriétés CSS, les objets SVG, DOM et JavaScript peuvent être animés. Il est très léger, seulement environ 9 Ko après compression gzip.

GitHub : https://github.com/juliangarnier/anime/

Typed.js

typed.js est une bibliothèque typée, l'effet est d'afficher un paragraphe à la manière d'une machine à écrire, qui peut être personnalisé n'importe quelle chaîne, spécifier la vitesse d'affichage, spécifier s'il faut boucler, etc.

GitHub : https://github.com/mattboldt/typed.js/

Vivus

Vivus est une bibliothèque JavaScript légère (sans dépendances) qui nous permet d'animer des fichiers SVG traités pour les faire ressembler à ils ont été tirés au sort. Il propose plusieurs animations différentes, ainsi que la possibilité de créer des scripts personnalisés pour dessiner le SVG comme vous le souhaitez.

GitHub : https://github.com/maxwellito/vivus

Popmotion

Popmotion est un moteur de mouvement JavaScript de 12 Ko qui peut être utilisé pour implémenter des animations, des effets physiques et le suivi des entrées. Prise en charge native du DOM : prise en charge prête à l'emploi de CSS, SVG, chemin SVG et attributs DOM.

GitHub : https://github.com/popmotion/popmotion

Graanim.js

granim.js est une petite bibliothèque JavaScript qui crée des animations fluides et interactives fluides dans les pages Web. graanim.js peut obtenir divers effets d'animation de dégradé souhaités, rendant les pages Web plus colorées et visuellement meilleures !

GitHub : https://github.com/sarcadass/granim.js

Kute.js

Kute.js est un moteur d'animation Javascript natif avec d'excellentes performances et un code modulaire. Il fournit de nombreux outils pour vous aider à créer des animations personnalisées. Il fournit des méthodes faciles à utiliser pour configurer des animations multi-navigateurs hautes performances.

GitHub : https://github.com/thednp/kute.js

Simple Parallax

simpleParallax.js est une bibliothèque Vanilla JS très simple et petite pour ajouter une animation de parallaxe sur n'importe quelle image. Il se démarque par sa simplicité d’utilisation et son rendu visuel. Les effets de parallaxe sont appliqués directement aux étiquettes d’image sans utiliser d’image d’arrière-plan.

GitHub : https://github.com/geosigno/simpleParallax.js

Barba.js

Barba.js est une petite bibliothèque (4 Ko minifiée et minifiée), flexible et sans dépendance, aide vous créez des transitions fluides et fluides entre les pages de votre site Web. Il réduit les délais entre les pages, minimise les requêtes HTTP du navigateur et améliore l'expérience Web des utilisateurs.

GitHub : https://github.com/barbajs/barba

mo.js

Mo.js est une bibliothèque d'animation graphique concise et efficace avec des animations fluides et une expérience utilisateur étonnante, l'indépendance de la densité d'écran fonctionne sur n'importe quel appareil, vous pouvez dessiner des formes intégrées ou des formes personnalisées, et vous pouvez dessiner plusieurs animations et les enchaîner.

GitHub : https://github.com/mojs

Particles.js

Particles.js Une bibliothèque JavaScript légère pour créer des effets de particules sur les pages Web.

GitHub : https://github.com/VincentGarreau/particles.js/

tsParticles

tsParticles facilite la création d'animations de particules hautement personnalisables et leur utilisation comme arrière-plans animés pour votre site Web. Composants prêts à l'emploi disponibles pour React.js, Vue.js (2.x et 3.x), Angular, Svelte, jQuery, Preact, Inferno, Solid, Riot et Web Components.

GitHub : https://github.com/matteobruni/tsparticles

Rough Notation

Rough Notation est une petite bibliothèque JavaScript permettant de créer et d'animer des annotations sur des pages Web. Il utilise RoughJS pour créer une apparence dessinée à la main. Les éléments peuvent être annotés dans différents styles. La durée de l'animation peut être configurée ou simplement désactivée. La taille compressée n’est que de 3,83 Ko.

GitHub : https://github.com/rough-stuff/rough-notation

Animate on Scroll

Animate on Scroll est une bibliothèque d'animation JavaScript qui crée des animations sur la page.

GitHub : https://github.com/topics/animate-on-scroll

Framer Motion

Motion est une bibliothèque de mouvements prête pour la production pour Framer pour React. Il apporte des animations déclaratives, des transitions de mise en page faciles et des gestes tout en conservant la sémantique HTML et SVG. Motion étend le système d'événements de React avec un puissant outil de reconnaissance de gestes. Il prend en charge le survol, le clic, le panoramique et le glisser. Notez que Motion nécessite React 16.8 ou version ultérieure.

GitHub : https://github.com/framer/motion

React Motion

React Motion est une bibliothèque d'animation pour les applications React qui facilite la création et la mise en œuvre d'animations réalistes.

GitHub : https://github.com/chenglou/react-motion

【Tutoriels vidéo associés recommandés : front-end web】

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!