24,00

Tuto Comment ajouter de l'animation à votre site facilement avec CSS, JavaScript

24,00

  • Une formation vidéo de 2h14m
  • Téléchargement immédiat et visionnage illimité à vie
  • Satisfait ou remboursé
  • Fichiers sources inclus
Comment ajouter de l'animation à votre site facilement

ajouter ce cours aux favoris retirer ce cours des favoris

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



Formateur : Carl Brison

Carl Brison a publié 307 tutoriels et obtenu une note moyenne de 4,9/5 sur 18 552 tutoriels vendus. Carl Brison est un formateur certifié tuto.com. Voir les autres formations de Carl Brison

5,0
note moyenne

5
avis laissés
5 étoiles
5
4 étoiles
0
3 étoiles
0
2 étoiles
0
1 étoile
0
  • 5
    avis de devfront_45 laissé 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

  • 5
    avis de valerie-a77 laissé 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 ! :-)
    "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. "

  • 5
    avis de membre-7129-6122 laissé 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
    "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"

  • 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.
Parcours Developpeur Front End
accédez à plus de 1422 tuto gratuits


non, je ne veux pas me former gratuitement

voir notre politique de protection des données