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.
Table des matières de cette formation CSS, JavaScript (durée : 2h14m)
-
Introduction
- Présentation du job gratuit 00:03:18
-
Création du site One Page
- Mise en place du code HTML 1/2 00:09:07
- Mise en place du code HTML 2/2 00:04:23
- Mise en place du CSS des différentes zones 00:04:43
- Mise en place du CSS de la zone Nav 00:07:44
- Mise en place du CSS de la zone Section 00:03:38
- Mise en place du CSS de la zone Article générale 00:04:42
- Mise en place du CSS de la zone Article#1 00:04:45
- Mise en place du CSS de la zone Article#2 00:09:14
- Mise en place du CSS de la zone Article#3 00:04:33
- Mise en place du CSS de la zone Article#4 00:01:53
- Mise en place des media queries 00:03:32
- Mise en place des différents liens 00:09:34
- Mise en place d'un script jQuery 00:10:18
-
Comment mettre en place une animation
- Présentation AnimateCSS 00:01:59
- Mise en place d'une animation 00:04:50
- Ajout d'options à l'animation 00:03:51
- Animer d'autres éléments de la page web 00:02:31
-
De retour sur notre travail en cours
- Animation des différents éléments 00:06:34
-
Comment faire fonctionner les animations au scroll
- Présentation de WowJS 00:01:55
- Mise en place d'une librairie JS 00:05:26
- Les options de la librairie JS 00:03:24
-
De retour sur notre travail en cours
- Animation des éléments au scroll 00:03:15
-
Version 4 d'Animate.Style
- Présentation 00:02:03
- Récupération de la nouvelle librairie 00:02:45
- Mise en place de la nouvelle librairie 00:07:18
- Vérification de fonctionnement de la librairie JS 00:02:41
- Modification de la librairie JS 00:03:02
-
Conclusion
- Conclusion 00:02:01
- Fichiers sourcestélécharger
- QCMaccéder
- Certificat
Formateur : Carl Brison
-
Merci Carl pour cette excellente formation. J'ai vraiment apprécié la qualité du contenu et la clarté de vos explications. Les informations que j'ai apprises dans cette formation seront d'une grande aide pour moi dans mon propre travail. Encore une fois, merci pour votre excellent travail et vos efforts pour partager vos connaissances avec les autres. Validé 100 % ajouter de l'animation
-
Perso j'ai bien capté la version 3 mais pour la version 4, c'est pas encore ça. Je ne comprend pas la différence entre wow et animate__animated, d'autant que ça ne fonctionne qu'à moitié. Il me faudra "fouiller" le site. Ceci étant, c'est une belle découverte pour de belles animations et merci de nous l'avoir fait découvrir. @ plus tard ! :-)
-
Super tuto , je cherche le même pour monter une galerie photo interactive , en js et php . Avez vous cela ? Merci
-
Avec quelles versions de logiciels ce tuto est-il compatible ?CSS , JavaScript
-
Quel est le niveau requis pour suivre ce tuto ?débutant
-
Que contient le fichier source ?Les codes sources de ce tuto.
note moyenne
avis laissés