4.8/5 Trustpilot (1392 avis)
Maîtrisez les animations CSS avancées (scroll, view, timeline)
Maîtrisez les animations CSS avancées (scroll, view, timeline)
Dans ce tuto en vidéo, je vous propose d'apprendre à animer vos pages et sites web très facilement.
Vous allez pouvoir utiliser ces nouvelles compétences dans vos projets déjà existants et en quelques petites minutes seulement !
Dans ce tuto Comment ajouter de l'animation à votre site facilement
En support de ce tuto, nous allons réaliser un site web One Page, évidemment responsif. Puis, nous apprendrons à donner vie à cette page en animant de façon très simple, certains éléments HTML de nos choix. Pour cela, nous utiliserons les librairies Animate.style et wowjs (des librairies d'animations CSS et Javascript).
Je mets à votre disposition, les sources du travail que nous allons réaliser dans ce tutoriel.
Je reste disponible dans le salon d'entraide pour répondre à vos éventuelles questions sur ce cours.
Un QCM vous sera proposé en fin de formation et vous permettra de valider les connaissances théoriques acquises pendant la formation.
Qu’allez-vous apprendre dans ce cours ?
Plan de cours
Chapitre 1
Introduction
Introduction
Chapitre 2
Création du site One Page
Création du site One Page
Chapitre 3
Comment mettre en place une animation
Comment mettre en place une animation
Chapitre 4
De retour sur notre travail en cours
De retour sur notre travail en cours
Chapitre 5
Comment faire fonctionner les animations au scroll
Comment faire fonctionner les animations au scroll
Chapitre 6
De retour sur notre travail en cours
De retour sur notre travail en cours
Chapitre 7
Version 4 d'Animate.Style
Version 4 d'Animate.Style
Table des matières
Chapitre 1 : Introduction
03m18
Leçon 1Présentation du job
Chapitre 2 : Création du site One Page
1h18
Leçon 1Mise en place du code HTML 1/2
Leçon 2Mise en place du code HTML 2/2
Leçon 3Mise en place du CSS des différentes zones
Leçon 4Mise en place du CSS de la zone Nav
Leçon 5Mise en place du CSS de la zone Section
Leçon 6Mise en place du CSS de la zone Article générale
Leçon 7Mise en place du CSS de la zone Article#1
Leçon 8Mise en place du CSS de la zone Article#2
Leçon 9Mise en place du CSS de la zone Article#3
Leçon 10Mise en place du CSS de la zone Article#4
Leçon 11Mise en place des media queries
Leçon 12Mise en place des différents liens
Leçon 13Mise en place d'un script jQuery
Chapitre 3 : Comment mettre en place une animation
13m11
Leçon 1Présentation AnimateCSS
Leçon 2Mise en place d'une animation
Leçon 3Ajout d'options à l'animation
Leçon 4Animer d'autres éléments de la page web
Chapitre 4 : De retour sur notre travail en cours
06m34
Leçon 1Animation des différents éléments
Chapitre 5 : Comment faire fonctionner les animations au scroll
10m45
Leçon 1Présentation de WowJS
Leçon 2Mise en place d'une librairie JS
Leçon 3Les options de la librairie JS
Chapitre 6 : De retour sur notre travail en cours
03m15
Leçon 1Animation des éléments au scroll
Chapitre 7 : Version 4 d'Animate.Style
17m49
Leçon 1Présentation
Leçon 2Récupération de la nouvelle librairie
Leçon 3Mise en place de la nouvelle librairie
Leçon 4Vérification de fonctionnement de la librairie JS
Leçon 5Modification de la librairie JS
Chapitre 8 : Conclusion
02m01
Leçon 1Conclusion
Aperçus
Avis des apprenants