Animation d’images en Jquery

Objectifs

Connaitre les méthodes animate()
Etre capable d’animer des modifications apportées aux propriétés CSS

Présentation

Dans ce tutoriel, nous allons créer un rotateur d’image de base (curseur) à l’aide de fonctions d’animation de jQuery. Nous allons également étendre les fonctionnalités de notre script pour mettre l’animation en pause lorsque nos utilisateurs survolent le rotateur.
Alors nous ajoutons de liens précédents et suivants au script pour permettre aux utilisateurs de faire défiler à travers nos images à leur rythme.
Enfin, nous ajouterons une pagination lien, afin que notre utilisateur puisse parcourir les images dans notre rotateur d’images.
Nous parlerons des méthodes d’animation suivantes dans ce tutoriel

fadeIn()
fadeOut()
fadeToggle()

Animations en fondu

Les méthodes fadeIn() et fadeOut() effectuent les animations les moins complexes disponibles via jQuery. Ils ajustent simplement l’opacité des éléments sélectionnés pour afficher ou masquer et peut être utilisé sans configuration supplémentaire.
La méthode fadeToggle() est presque aussi simple, mais fournit une logique de base pour vérifier l’états actuelles des éléments sélectionnés.
Les éléments masqués avec display: none ne sera défini sur leur type d’affichage correct (soit display: block pour les éléments de niveau bloc, soit display: inline pour les éléments inline) lorsque cela est possible au début d’une animation fadeIn().
Il est important de le noter car vos styles CSS peuvent avoir un impact sur l’apparence d’un élément dans lequel vous vous fondez.
Le type d’affichage naturel d’un élément est utilisé dans la mesure du possible, donc masqué les éléments <li> sont définis pour afficher: élément de liste et les éléments <td> masqués sont définis pour afficher: display:table-cell.
Dans leurs formes les plus simples, ces méthodes peuvent être utilisées sans configuration supplémentaire. Nous pouvons simplement appeler les méthodes sur n’importe quelle collection d’éléments sélectionnés sans utiliser d’arguments:

$(elements).fadeIn();
$(elements).fadeOut();
$(elements).fadeToggle();

Lorsqu’aucun argument n’est fourni, les animations auront la durée par défaut de 400 millisecondes et l’assouplissement par défaut du swing. Nous parlerons très rapidement de l’assouplissement de l’animation.

Configuration des animations avec des arguments

Avec les arguments, les méthodes de décoloration peuvent prendre la forme suivante (les crochets indiquent les arguments facultatifs):

$(elements).fadeIn([duration] [,easing] [,callback]);
$(elements).fadeOut([duration] [,easing] [,callback]);
$(elements).fadeToggle([duration] [,easing] [,callback]);

Nous pouvons contrôler la durée de l’animation à l’aide de l’argument duration pour spécifier un entier en millisecondes ou des chaînes "slow" et "fast". Ces chaînes sont des raccourcis pour 600 et 200 millisecondes respectivement. La durée par défaut indiquée si aucune n’est spécifiée est 400.
Nous pouvons également fournir 0 comme argument de durée, ce qui désactivera efficacement l’animation. Il est peu probable que nous ayons besoin de le faire car il serait plus efficace de ne pas utiliser d’animation du tout, mais il est utile de le savoir. Je dois souligner que la décoloration se produira toujours; cela se produira juste sur une durée de 0 millisecondes. Faire cela reviendrait essentiellement à utiliser .hide ().

Exemple

Fichier HTML

Pour commencer, nous devons créer les éléments qui seront utilisés dans l’exemple et le style pour définir leur apparence visuelle.
Créez un nouveau document HTML en utilisant le fichier modèle suivant:


<!doctype html>
   <head>
html lang="fr">
<title></title>
<meta charset="utf-8">
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
<script src="js/.js"></script>
<link rel="stylesheet" href="css/.css">
 </head>
   <body>
   </body>
</html>

Pour commencer, et entre la balise <body>, ajoutez le sous-jacent suivant balisage pour notre curseur d’image:

<div class="container">
         <div id="slider">
         <img src="img/0.png">
         <img src="img/1.png">
         <img src="img/2.png">
         <img src="img/3.png">
         <img src="img/4.png">
         <img src="img/5.png">
         <img src="img/6.png">
         </div>
         </div>

Fichier CSS

آous devons créer la feuille de style à laquelle nous venons de créer un lien. Dans un nouveau fichier, ajoutez le code suivant:

.container { position:relative; width:200px; height:200px;}
#slider img { position:absolute; display:none; border-radius:3px;}

Fichier JS

$(document).ready(function() {
   var image = $("#slider img");
   var numSlides = image.length;var activeSlide = 0;
   var speed = 2000;var fade = 1000;
   var timer = setInterval(rotate, speed);
   image.eq(activeSlide).show();
   function rotate() { activeSlide++; if (activeSlide == numSlides) { activeSlide = 0; } 
   image.not(activeSlide).fadeOut(fade); 
   image.eq(activeSlide).fadeIn(fade);}
});

Explication

Pour cet exemple, nous utiliserons sept images dans notre rotateur d’images. Cela peut facilement être modifié en fonction de nos besoins en ajoutant simplement des images supplémentaires à <div id="slider">
Nous avons enveloppé notre élément #slider dans un élément <div> avec une classe container afin que nous puissions définir les dimensions de notre rotateur d’images au cas où toutes nos images ne seraient pas de la même largeur et de la même hauteur. En outre, nous définissons position: relative à la div #slider de sorte que les images du rotateur définies sur position: absolue ne soient pas supprimées du flux de page.
Pour définir le temps entre chaque exécution de la fonction rotate(), nous définissons la variable de vitesse sur 2000 millisecondes (2 secondes). 2 secondes est une bonne vitesse pour notre exemple, mais vous voudrez la régler sur une durée plus longue en fonction des images que vous faites pivoter.
Si vous avez du texte sur vos images que vous souhaitez que vos utilisateurs lisent, vous devez définir la vitesse de rotation en fonction du temps que vous pensez qu’il faudra à vos utilisateurs pour lire confortablement tout le texte.
Si vous avez des images avec des détails élevés, réglez la vitesse sur quelque chose que vous pensez être un temps généreux pour prendre en compte tous les détails.
Dans le cas où vous avez un élément cliquable qui nécessite un "appel à l’action ", ce temps devra être pris en considération en fonction du temps qu’il faut à l’utilisateur pour digérer les informations et prendre l’action que vous souhaitez qu’il prenne.
Notre variable fade est définie sur 1000 (1 seconde) car il s’agit d’une vitesse décente pour la décoloration des images. Cela peut être modifié pour répondre à vos besoins et vous constaterez qu’il n’y a pas de temps standard ni de vitesse. Vous devrez adapter ces horaires pour offrir à vos utilisateurs la meilleure expérience possible sur votre site Web.
Les images sont définies sur la position: absolue car elles doivent s’empiler les unes derrière les autres pour que notre élément rotateur d’image ne saute pas pendant que les images sont déplacées vers l’intérieur et l’extérieur.
Cela est nécessaire car toutes les images occuperont la même position relative sur la page. Cependant, nous ne voulons afficher qu’une seule image à la fois.
L’utilisation de display:none: ne désactivera la visibilité sur toutes nos images. Cela est nécessaire pour que nous n’ayons pas à nous soucier de l’ordre d’empilement de nos images.
Nous voulons une bonne présentation de nos images, nous avons donc ajouté un petit rayon de bordure sur les images pour adoucir les coins.
Ceci est une capture d’écran de ce que nous venons de créer en utilisant le code précédent. Vous remarquerez comment la première image s’estompe en même temps que notre prochaine image apparaît. Cet effet est appelé cross-fading.

Animation d'images en Jquery

Application

Énoncé

Dans un fichier html réaliser le rendu de l’image suivant:
Télécharger les images depuis l’adresse Suivante.

Solution

Fichier HTML

<!doctype html>
   <head>
      <title>The jQuery Example</title>
     <!-- <script type = "text/javascript"  src = "js/jQuery.js"></script>-->
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> 
          <script type = "text/javascript"  src = "application01.js"></script> 
      <link type="text/stylesheet" href="application01.css">
   </head>
	
   <body>
      <div>
      <img src="img/1.png" width="150px" height="150px" id="chat01"> 
      <img src="img/2.png" width="150px" height="150px" id="chat02"> 
      <img src="img/3.png" width="150px" height="150px" id="chat03"> 
       <img src="img/4.png" width="150px" height="150px" id="chat04"> 
       <img src="img/5.png" width="150px" height="150px" id="chat05"> 
       <img src="img/6.png" width="150px" height="150px" id="chat06"> 
       <img src="img/7.png" width="150px" height="150px" id="chat07"></div>
   </body>
</html>

Fichier JS

$(function() {
   var ancien='';
   $("img").click(function(){
     var ddd="#"+$(this).attr("id");
     if(ancien!='' && ancien!=ddd)
     {
       // alert(ancien);
      $(ancien).animate({'height':'150px','width':'150px',},1000);
     }
     $(ddd).animate({'height':'500px','width':'500px',},1000);
     //$(ddd).fadeOut(3000);

     ancien=ddd;
   });
 });

Source:Livre JQuery 2.0 Animation Techniques Beginner’s Guide
Auteur: Culpepper, Adam, Wellman, Dan
Date: 2013

La méthode animate() de jQuery V2

Animation de formulaire avec Jquery

Sommaire du cours jQuery

jQuery

Animation d’images en Jquery

Objectifs

Présentation

Animations en fondu

Configuration des animations avec des arguments

Exemple

Fichier HTML

Fichier CSS

Fichier JS

Explication

Application

Énoncé

Solution

Sommaire du cours jQuery

Animation avec jQuery

Animation de formulaire avec Jquery

You may also like

Correction application animate() V2

La méthode animate() de jQuery v2

Correction application animate()