Retour
JQuery: Les animations
Dans ce cours, vous apprendrez à ajouter des animations et des effets à vos pages web en utilisant les fonctions prêtes à l'emploi de JQuery.
Vous découvrirez les fonctions de base d'animation de JQuery, comme fadeIn, fadeOut, slideUp et slideDown, ainsi que les effets d'animation avancés.
0
Prérequis
Pour suivre cette serie d'inititaion, vous devez avoir une expérience pratique avec HTML et CSS et une compréhension de base du langage JavaScript.
- Initiation à HTML.
- Initiation à CSS.
- Initiation au language Javascript.
Il est conseiller d'avoir suivit les cours précedent sur JQuery:
- Introductionà la librairie JQuery.
- La manipulation de DOM avec JQuery.
- La géstion d'événements avec JQuery.
Objectifs
À la fin de ce chapitre, vous serez en mesure de :
- Comprendre le fonctionnement des ** animations** avec JQuery
- Utiliser les fonctions de base d'animation de JQuery
- Appliquer les effets d'animation avancés avec JQuery
- Animer les transitions CSS avec JQuery
- Controler les animations en utilisant les événements.
Structure du projet
Vous pouvez récuperer le projet le départ sur GitHub:
git clone https://github.com/Djemai-Samy/1.jquery-initiation
Ou récupérer le projet de départ sur GitLab:
git clone https://gitlab.com/tutoriels-dev/1.web/3.javascript/jquery/1.jquery-initiation
1.jquery-intiation
┣ 📜index.js
┣ 📜index.css
┗ 📜index.html
Pour illustrer nos exemples, nous allons ajouter des éléments à notre page HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- CDN de JQuery -->
<script
src="https://code.jquery.com/jquery-3.7.0.js"
integrity="sha256-JlqSTELeR4TLqP0OG9dxM7yDPqX1ox/HfgiSLBj8+kM="
crossorigin="anonymous"
></script>
<!-- Votre script -->
<script src="./index.js" defer></script>
<!-- Vote style -->
<link rel="stylesheet" href="./index.css" />
<title>JQuery: Introduction</title>
</head>
<body>
<h1 id="test">JQuery: Introduction</h1>
<p id="fondu">Fondu</p>
<p id="glisse">Glisse</p>
</body>
</html>
1. Qu'est-ce que les animations?
1. Définition des animation
Les animations et les effets sont des techniques pour ajouter du mouvement et de l'interactivité aux sites web.
Les animations peuvent inclure des transitions fluides entre les pages ou les éléments, le fondu, le défilement, le rebondissement...
- Cours sur les animations avec CSS.
Les animations et les effets peuvent être utilisés pour améliorer l'expérience utilisateur d'un site web, en créant un flux plus fluide et en attirant l'attention sur les éléments clés.
Les exemples courants incluent les diaporamas d'images, les menus déroulants, les boutons de chargement, et les pop-ups.
2. Pourquoi utiliser JQuery pour les animations ?
JQuery simplifie le processus d'animation et d'effet, en utilisant une syntaxe plus simple et en offrant des fonctionnalités supplémentaires telles que la gestion de la durée et de la progression de l'animation.
Javascript pur peut être plus difficile à comprendre pour les débutants, mais offre une plus grande flexibilité et un plus grand contrôle sur les animations et les effets.
Les avantages de l'utilisation de JQuery pour les animations et les effets comprennent la simplicité de la syntaxe, la compatibilité multi-navigateurs, et la vitesse d'exécution des animations.
2. Les fonctions de base d'animation
1. fadeIn et fadeOut
fadeIn et fadeOut sont des fonctions d'animation qui permettent de faire apparaître et disparaître un élément progressivement.
Par exemple, fadeIn peut être utilisé pour faire apparaître un texte ou une image de manière progressive, tandis que fadeOut peut être utilisé pour faire disparaître un élément progressivement.
Les méthodes fadeIn et fadeOut prennent deux paramètres:
tempsde typeNumberreprésentant la durée de l'animation en **millisecondes.callback: Une fonction a exécuter à la fin de l'animation.
$("selecteur").fadeIn(temps, callbackIn);
$("selecteur").fadeOut(temps, callbackIn);
Par exemple, le code suivant Fait apparaitre et disparaitre des éléments avec une durée de 1 seconde :
$("#fondu").fadeOut(1000, function () {
$(this).fadeIn(1000);
});
Noter que pour faire apparaitre un élément en utilisant fadeIn, il faut que l'élément soit caché au départ en utilisant display: none en CSS, ou en utilisant la méthode hide() de JQuery.
2. Utilisation de slideUp et slideDown
slideUp et slideDown sont des fonctions d'animation qui permettent de faire apparaître et disparaître un élément avec un effet de glissement vertical.
Par exemple, slideDown peut être utilisé pour faire apparaître un menu déroulant, tandis que slideUp peut être utilisé pour fermer le menu déroulant.
Les méthodes slideUp et slideDown prennent deux paramètres:
tempsde typeNumberreprésentant la durée de l'animation en **millisecondes.callback: Une fonction a exécuter à la fin de l'animation.
$("selecteur").slideUp(temps, callbackIn);
$("selecteur").slideDown(temps, callbackIn);
Par exemple, le code suivant Fait apparaitre et disparaitre des éléments avec une durée de 1 seconde :
$("#glisse").slideUp(1000, function () {
$(this).slideDown(1000);
});
Noter que pour faire apparaitre un élément en utilisant slideDown, il faut que l'élément soit caché au départ en utilisant display: none en CSS, ou en utilisant la méthode hide() de JQuery.
3. Utilisation de animate
La fonction animate() permet de créer des animations personnalisées en modifiant les propriétés CSS d'un élément HTML.
Cette fonction prend deux paramètres :
props: les propriétés CSS à modifier,.options: Objets pour configurer l'animation:duration: la durée de l'animation en millisecondes,easing: le type d'effet à appliquer (swing,linear, etc.),complete: une fonction de rappel à exécuter une fois l'animation terminée,queue: un booléen pour indiquer si l'animation doit être mise en file d'attente si d'autres animations sont en cours sur l'élément,step: une fonction de rappel à exécuter à chaque étape de l'animation.
$("#monElement").animate({
left: '+=100px',
opacity: 0.5
}, {
duration: 1000,
step: function(now, fx) {
console.log(fx.prop + " : " + now);
},
complete: function() {
alert("Animation terminée !");
}
});
Par exemple, le code suivant Fait apparaitre et disparaitre des éléments avec une durée de 1 seconde :
$("#glisse").slideUp(1000, function () {
$(this).slideDown(1000);
});
Noter que pour faire apparaitre un élément en utilisant slideDown, il faut que l'élément soit caché au départ en utilisant display: none en CSS, ou en utilisant la méthode hide() de JQuery.
Conclusion
a
Aller plus loin
Commentaires
1
