() translation by (you can also view the original English article)
Une animation bien réalisée et significative peut réellement améliorer l'expérience d'interaction de vos sites Web et vos applications. Elle peut raconter une histoire, aider à naviguer et plus encore.
Si vous désirez apprendre à utiliser l'animation dans vos projets de web design et de développement de sites Web, lisez cet aticle. Nous avons composé une liste complète de 11 cours qui vous expliqueront comment créer de superbes animations à l'aide de CSS, de JavaScript et de framework tels que GreenSock et Sequence.js.
1. Practical Web Animation
Ce premier cours peut être un bon début pour apprendre l'animation. À partir de 30 vidéos d'une durée supérieure à quatre heures, vous apprendrez de nombreuses manières pratiques de créer des animations pour des boutons, des tables de prix et d'autres éléments Web utiles à l'aide de files CSS et jQuery compressés.
2. 6 Handy CSS3 Animation Projects
Parfois, le meilleur moyen d’acquérir de nouvelles compétences consiste à plonger vos manches et à réaliser de vrais projets. Avec ce court cours vous allez créer six petits bon projets, en utilisant l'animation CSS.
3. A Visual Guide to CSS Animation
Bien que JavaScript et jQuery soient préférés pour les animations, vous pouvez également créer des effets époustouflants avec du CSS pur. Dans ce cours, vous apprendrez à créer des animations CSS basées sur les propriétés "transition" et "transform". En utilisant le populaire outil de conception Web visuelle Webflow (via un compte gratuit), vous pouvez voir comment l’animation est reproduite pendant sa création.
4. Introduction to Anime.js
Anime.js est un petit moteur d'animation JavaScript mais puissant. Dans ce cours, vous allez apprendre les bases de cette bibliothèque et à créer une interface utilisateur simple pour la Formule 1.
5. Easing in to Cubic Bezier Functions
Qu'est-ce que c'est easing? Pourquoi c'est nécessaire pour l'animation Web? Comment gérer et l'appliquer dans le contexte de CSS? Dans ce cours super rapide, vous apprendrez les réponses à toutes ces questions.
6. 3D Animation With Three.js
Le framework Three.js est un excellent moyen de créer des graphiques 3D dans le browser. Dans ce cours, vous apprendrez à créer des animations 3D complexes à l'aide de framework JavaScript. Veillez également à regarder les cours précédents 3D on the Web With Three.js et Three.js: Beyond the Basics. Les trois cours donneront une introduction approfondie sur Three.js au débutant .
7. GreenSock Animation Platform: First Steps
GreenSock est un framework JavaScript qui simplifie l'animation d'éléments HTML. Pendant ce cours, vous ferez les premiers pas vers l’exploration de ce puissant framework. Dès que vous maîtriserez les bases du HTML et du CSS, atteindrez les connaissances de base du JavaScript, vous aurez tout ce que vous en avez besoin pour maîtriser le framework.
8. 3 GreenSock Projects: Practical Animation With GSAP
Ce cours est basé sur les précédents et présents trois projets à partir desquels vous apprendrez à créer des animations logicielles pour des projets réels à l'aide de la plate-forme d'animation GreenSock. Vous apprendrez à créer un preloader animé, une animation de logo SVG et un slider configuré.
9. Up and Running With CSS Keyframe Animations
Désirez-vous en savoir plus sur l'animation avec keyframe CSS et de propriétés d'animation seulement en dix minutes? Ce cours rapidement vous en parlera.
10. Enhancing Animation With jQuery UI
jQuery UI est une extension jQuery qui simplifie la création d'éléments nets d'interface utilisateur pour vos sites. Il fournit également une fonctionnalité qui étend la capacité de jQuery à animer du contenu. Dans ce court cours, vous apprendrez à l'utiliser pour améliorer l'animation jQuery.
11. Introduction to Sequence.js
Sequence.js est un framework CSS permettant de créer des sliders, des présentations et d’autres éléments avec une reproduction progressive du сontenu visuel at de texte. Il a toutes les fonctionnalités nécessaires; tout ce que vous avez à faire est d’ajouter votre contenu et votre style. Ce court cours vous apprendra les bases de Sequence.js et jettera les bases d’une étude plus approfondie de toutes ses caractéristiques et fonctions.
Regardez n'importe quel cours tout de suite
Vous pouvez étudier n’importe lequel de nos cours juste après votre inscription à Envato Elements. Avec une petite paie mensuelle vous aurez accès non seulement à ces cours, mais également à notre bibliothèque grandissante de plus de 1000 cours vidéo et à nos principaux livres électroniques sur Envato Tuts +.
De plus, vous avez maintenant un accès illimité à l’immense bibliothèque d’Envato Elements, constituée de plus de 700 000 éléments créatifs. Créez des fonts uniques, des photos, des graphiques et des templates, améliorez vos projets plus rapidement.
