Le 14 septembre 2017, nous avons publié une version actualisée de notre Politique de confidentialité. En utilisant video2brain.com vous vous engagez à respecter ces documents mis à jour. Veuillez donc prendre quelques minutes pour les consulter.

L'essentiel de JavaScript

Animer avec CSS et JavaScript

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
À l'aide de cette vidéo, vous allez comprendre comment utiliser CSS et JavaScript pour animer des éléments de la page web.

Transcription

C'est en utilisant JavaScript pour modifier de manière continue des propriétés CSS que l'on peut commencer à animer nos éléments. Alors, sur cette page web, dans le fond, j'ai un « div » qui s'appelle « Enregistrez-vous ! », vous le voyez, ici, dans le fond, et ce « div » a pour objectif de persuader mon internaute de s'abonner à ma newsletter, et j'aimerais que ce « div » soit un peu plus visible, j'aimerais le mettre en avant. Donc, voici ce que j'ai fait. je vais rafraîchir ma page et, au bout de 5 secondes, vous allez voir que ce « div » ne sera plus en bas, mais va venir en haut, voilà. Et va traverser ma page de part en part. Et, quand il atteindra une certaine position, il disparaît, en fait, il ne disparaît pas vraiment, il va tout simplement reprendre sa place originale, dans le fond de la page. Comment réalise-t-on ceci en HTML et en JavaScript, retour dans mon éditeur, le « div » en question est sélectionné ici, il a pour identifiant « join », vous voyez, et, au niveau du JavaScript, voilà ce qu'il se passe. Je commence par créer deux variables, ici, au-dessus. Une première qui s'appelle « currentPos » et que j’initialise à 0. Une seconde qui s'appelle « intervalHandle », vous voyez que je ne lui donne pas de valeur, je me contente de déclarer cette variable, donc, pour le moment, elle est « undefined », rappelez-vous. Ensuite, j'ai, dans le fond, l’événement « window.onload », donc j'attends que la page soit complètement chargée et une fois que la page est prête, j'utilise « setTimeOut », pour lancer la fonction « beginAnimate » au bout de 5 secondes. Donc, rappelez-vous de « setTimeOut », qui me permet de différer l'exécution d'une fonction, dans ce cas-là, de 5 secondes, de 5000 millisecondes. Alors, la fonction « beginAnimate », elle est définie, ici, plus haut, dans mon code, et que fait cette fonction ? Pas grand chose, vous allez voir, Elle va chercher dans le DOM l'élément « join », qui est précisément le « div » que je veux animer, et puis, je rentre dans l'objet « style », associé à cet élément, pour pouvoir modifier les propriétés CSS. Et je modifie la propriété « position », que je rends égale à « absolute », puis je modifie aussi les propriétés « left » et « top », que je place, respectivement, à 0 pixel et 100 pixels, cela fait mon « div » se déplacer du bas de la page vers le haut de la page, je lui donne la position de départ, avant l'animation. Une fois qu'elle a cette position, j'utilise, ici, « setInterval », pour appeler la fonction « animateBox » toutes les 50 millisecondes. Donc, rappelez-vous de « setInterval », c'est une méthode du JavaScript qui me permet d'appeler, régulièrement, une fonction, elle prends deux paramètres : la fonction à appeler et tout les combien de temps je désire appeler cette fonction. Toutes les 50 millisecondes, cela veut dire, environ 20 fois par seconde. Rappelez-vous, également, que « setInterval » me renvoie une valeur. Cette valeur, je la stocke dans la variable « intervalHandle », que j'avais déclarée un petit peu plus haut, maintenant, cette variable n'est plus « undefined », elle a une valeur. Tout va se passer ici, dans la fonction « animateBox », qui est là. Alors, la première chose que je fais, je définis une nouvelle position. Donc, j'utilise « += » pour augmenter de 5, la valeur de la variable « currentPos ». Ensuite, tout se passe en ligne 15, je vais rechercher l'élément « join » dans le DOM, j'accède à sa propriété « style » et je change la propriété CSS « left », que je rends égale à « currentPos », c'est-à-dire, pour le moment, à 5, suivi de la chaîne de caractères px, donc un nombre et une chaîne de caractères, le +, ici, est le symbole de concaténation, et cela va me donner quelque chose qui ressemble à ce qui est sélectionné là, au-dessus, donc 5px, puis 10px, puis 15px, une chaîne de caractères qui est envoyée dans l'interpréteur CSS de mon navigateur. Ensuite, je vais vérifier si « currentPos » est plus grand que 900. Au bout d'un certain temps, « currentPos » va atteindre cette valeur 900. À ce moment-là, j'utilise « clearInterval » pour arrêter l'animation, et j'utilise, pour cela, ma variable « intervalHandle », qui contient la valeur renvoyée par « setInterval » au moment où j'avais démarré l'animation, et puis, je remets, ici, toutes les propriétés CSS de mon élément à 0, toutes celles que j'avais modifiées dans « beginAnimate », je les remets à leur valeur par défaut, ce qui a pour effet de replacer ce « div » dans le fond de la page, à sa position originale. Donc, voilà, ici, comment je peux, grâce à « setInterval » et à cette propriété « style » du DOM, changer de manière continue des propriétés CSS, ce qui a pour effet, ici, d'animer mon élément sur ma page.

L'essentiel de JavaScript

​Ajoutez des fonctionnalités interactives à vos pages web avec JavaScript. Découvrez la syntaxe, le DOM, l'utilisation des bibliothèques JavaScript populaires, etc.

Aucun commentaire n´est disponible actuellement
 
Logiciel :
Spécial abonnés
Date de parution :26 avr. 2016

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !