Comment ajouter de l'animation à votre site facilement
ERROR
00:00
00:00

Tuto Comment ajouter de l'animation à votre site facilement

Carl Brison
24,00€

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

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
Chapitre 2
Création du site One Page
Chapitre 3
Comment mettre en place une animation
Chapitre 4
De retour sur notre travail en cours
Chapitre 5
Comment faire fonctionner les animations au scroll
Chapitre 6
De retour sur notre travail en cours
Chapitre 7
Version 4 d'Animate.Style

Plan détaillé du cours

Chapitre 1 : Introduction
03m18s
 
Leçon 1Présentation du job
Chapitre 2 : Création du site One Page
1h18m
 
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
13m11s
 
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
06m34s
 
Leçon 1Animation des différents éléments
Chapitre 5 : Comment faire fonctionner les animations au scroll
10m45s
 
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
03m15s
 
Leçon 1Animation des éléments au scroll
Chapitre 7 : Version 4 d'Animate.Style
17m49s
 
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
02m01s
 
Leçon 1Conclusion

Aperçus

Avis des apprenants

Détail des avis
13
Apprenants
5
Commentaires
5/5
Note moyenne
5/5
5
4/5
0
3/5
0
2/5
0
1/5
0
Alain Tardif
Alain Tardif
Publié le 16/02/2023
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
Carl Brison
Carl Brison
Merci beaucoup Alain ;-)
Valérie Arno
Valérie Arno
Publié le 11/01/2022
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 ! :-)
Carl Brison
Carl Brison
Merci pour votre commentaire, Valérie. Il est vrai que comme ils ont changé de version pendant mes enregistrements, il a fallu s'adapter. Cependant vous ne devriez rencontrer aucune difficulté en employant la bonne version (ancienne ou récente ). À bientôt, Carl.
Jean-Claude Warg-Briers
Jean-Claude Warg-Briers
Publié le 16/11/2021
Super tuto , je cherche le même pour monter une galerie photo interactive , en js et php . Avez vous cela ? Merci
Carl Brison
Carl Brison
Merci pour votre commentaire. Il y a ce tuto qui traite les images mais juste avec JS: https://fr.tuto.com/javascript/dev-frontend-8-galerie-d-images-sur-differentes-colonnes-en-js,125381.html

Vos questions sur le cours

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.

Attendez ! 🤗

Accédez à plus de 1450 tutos gratuits

Notre politique de protection des données