Dans ce tuto en vidéo, nous allons apprendre, étape par étape à créer un Slider super stylé en combinant du JavaScript, la librairie d'animation Greensock et du CSS ! Cela nous permettra de créer des animations / transitions d'images et de textes fluides et agréables visuellement.
Ce genre de projet pratique permet de passer au niveau supérieur dans vos créations et à vraiment être en confiance quand on place des éléments en CSS et qu'on utilise du JavaScript de manière générale.
Je reste disponible dans le salon d'entraide pour répondre à vos éventuelles questions.
Rendez-vous de l'autre côté !
Table des matières de cette formation JavaScript, CSS (durée : 1h11m)
-
- Introduction projet Slider gratuit 00:01:28
- Mise en place gratuit 00:04:16
- Partie HTML de l'ensemble 00:06:34
- Mise en place de la Grille 00:09:17
- Aide CSS GRID 00:02:19
- Partie CSS de la gauche du slider 00:06:36
- Partie CSS de la partie droite 00:06:12
- Créer les deux autres panneaux 00:02:02
- Gérer le CSS de tous les panneaux 00:07:08
- Partie [removed] Faire baisser les slides 00:04:01
- Empêcher de sortir du tableau 00:01:51
- Découverte Timeline 00:04:33
- Faire disparaître / apparaître 00:03:02
- Animation lorsqu'on remonte 00:04:29
- Micro interactions des boutons 00:07:27
- Fichiers sourcestélécharger
- Certificat
Formateur : Enzo Ustariz
-
Atelier très sympa, de bonnes astuces pour les animations. Explications claires. Je recommande. 🙂
-
Super projet bien expl
-
Tres bon court, merci. Un petit soucis avec `.t${index}` => tu passes un peu rapidement sur ce point. J'avoue que je me suis acharné avec '.t${index}' qui ne marchait pas bien sur.
-
Avec quelles versions de logiciels ce tuto est-il compatible ?JavaScript , CSS
-
Quel est le niveau requis pour suivre ce tuto ?débutant
note moyenne
avis laissés