jQuery – Animation

LEÇON

 

Exemple N° 1

Faire apparaître lentement une image.

 

animation_1.html

<!DOCTYPE html>
<html>
    <head>

        <meta charset="UTF-8">
        <title>JavaScript</title>

        <script type="text/javascript" language="JavaScript" src="jquery-1.12.4.js"></script>

        <script type="text/javascript" language="JavaScript">

           $(document).ready(function(){
             $(".apparaitre-lentement").fadeIn(2000);
           });

        </script>

        <style>
        body { width:960px; margin:0 auto; background-color:#eeeeee; font-size:36px; }
        .section { background-color:white; text-align:center; margin:80px 0px; padding:80px 0px; }
        img { width:600px; background-color:skyblue; padding:20px; border:2px solid black;}
        .apparaitre-lentement { display:none; }
        </style>

    </head>

    <body>

        <div class="section">

            <img class="apparaitre-lentement" src="http://www.web-design-codex.fr/wp-content/uploads/2014/11/portugal.jpg">

        </div>

    </body>

</html>

 

 

Exemple N° 2

Animer (modifier progressivement) les styles CSS d'un élément avec la fonction animate() :

 

animation_2.html

<!DOCTYPE html>
<html>
    <head>

        <meta charset="UTF-8">
        <title>JavaScript</title>

        <script type="text/javascript" language="JavaScript" src="jquery-1.12.4.js"></script>

        <script type="text/javascript" language="JavaScript">

           $(document).ready(function(){
             $(".image-1").animate({
              opacity: '1.0',
              width: '600px',
              left: '100px',
              top: '100px'
             }, 2000);
           });

        </script>

        <style>
        body { width:960px; margin:0 auto; background-color:#eeeeee; font-size:36px; }
        .section { background-color:white; text-align:left; margin:80px 0px; padding:80px 0px; min-height:500px; position:relative; }
        img { position:absolute; top:20px;}
        .image-1 { opacity:0.25; width:100px; left:20px; }
        </style>

    </head>

    <body>

        <div class="section">

            <img class="image-1" src="http://www.web-design-codex.fr/wp-content/uploads/2014/11/portugal.jpg">

        </div>

    </body>

</html>

 

Exemple N° 3

Utiliser animate() pour rendre interactive les éléments dans la page :

 

animation_3.html

<!DOCTYPE html>
<html>
    <head>

        <meta charset="UTF-8">
        <title>JavaScript</title>

        <script type="text/javascript" language="JavaScript" src="jquery-1.12.4.js"></script>

        <script type="text/javascript" language="JavaScript">

           $(document).ready(function(){
             
             $(".image-1").click(function(){

               $(".image-1").animate({
                opacity: '1.0',
                width: '600px',
                left: '100px',
                top: '100px'
               }, 400);

               $(".image-2").animate({
                opacity: '0.25',
                width: '100px',
                left: '140px',
                top: '20px'
               }, 400);

             });
             
             $(".image-2").click(function(){

               $(".image-2").animate({
                opacity: '1.0',
                width: '600px',
                left: '100px',
                top: '100px'
               }, 400);

               $(".image-1").animate({
                opacity: '0.25',
                width: '100px',
                left: '20px',
                top: '20px'
               }, 400);

             });
           });

        </script>

        <style>
        body { width:960px; margin:0 auto; background-color:#eeeeee; font-size:36px; }
        .section { background-color:white; text-align:left; margin:80px 0px; padding:80px 0px; min-height:500px; position:relative; }
        img { position:absolute; top:20px;}
        .image-1 { opacity:0.25; width:100px; left:20px; }
        .image-2 { opacity:0.25; width:100px; left:140px; }
        .image-3 { opacity:0.25; width:100px; left:260px; }
        </style>

    </head>

    <body>

        <div class="section">

            <img class="image-1" src="http://www.web-design-codex.fr/wp-content/uploads/2014/11/portugal.jpg">

            <img class="image-2" src="http://www.web-design-codex.fr/wp-content/uploads/2015/03/portugal2.jpg">

            <!-- <img class="image-3" src="http://www.web-design-codex.fr/wp-content/uploads/2015/03/portugal3.jpg"> -->

        </div>

    </body>

</html>

 

Mini-exercice

  • faire en sorte que la 3ème image (actuellement commentée dans l'exemple) fait partie de l'animation.

 

 

Exemple N° 3b (Rationalisation du code)

On encapsule, dans des fonctions à part, la fonctionnalité qui grandit ou réduit une image - ceci pour pouvoir l'exploiter de manière plus modulaire :

 

animation_3b.html

<!DOCTYPE html>
<html>
    <head>

        <meta charset="UTF-8">
        <title>JavaScript</title>

        <script type="text/javascript" language="JavaScript" src="jquery-1.12.4.js"></script>

        <script type="text/javascript" language="JavaScript">

		   function anim_big(classe)
		   {
		     $(classe).animate({
                       opacity: '1.0',
                       width: '600px',
                       left: '100px',
                       top: '100px'
                     }, 400);
		   }
		   
		   function anim_small(classe, leftpixels)
		   {
		     $(classe).animate({
                       opacity: '0.25',
                       width: '100px',
                       left: leftpixels,
                       top: '20px'
                      }, 400);
		   }
		   
           $(document).ready(function(){
             
             $(".image-1").click(function(){
			   anim_big(".image-1");
			   anim_small(".image-2", '140px');
			   anim_small(".image-3", '260px');
             });
             
             $(".image-2").click(function(){
			   anim_big(".image-2");
			   anim_small(".image-1", '20px');
			   anim_small(".image-3", '260px');
             });
			 
			 $(".image-3").click(function(){
			   anim_big(".image-3");
			   anim_small(".image-1", '20px');
			   anim_small(".image-2", '140px');
             });
           });

        </script>

        <style>
        body { width:960px; margin:0 auto; background-color:#eeeeee; font-size:36px; }
        .section { background-color:white; text-align:left; margin:80px 0px; padding:80px 0px; min-height:500px; position:relative; }
        img { position:absolute; top:20px; opacity:0.25; width:100px; }
        .image-1 { left:20px; }
        .image-2 { left:140px; }
        .image-3 { left:260px; }
        </style>

    </head>

    <body>

        <div class="section">

            <img class="image-1" src="http://www.web-design-codex.fr/wp-content/uploads/2014/11/portugal.jpg">

            <img class="image-2" src="http://www.web-design-codex.fr/wp-content/uploads/2015/03/portugal2.jpg">

            <img class="image-3" src="http://www.web-design-codex.fr/wp-content/uploads/2015/03/portugal3.jpg">

        </div>

    </body>

</html>

 

 

Exemple N° 4 - détecter la valeur actuelle d'une propriété CSS et agir en fonction

En exploite maintenant cette modularité pour pousser l'interactivité plus loin : dans cet exemple on teste l'état actuel d'une image avant de décider quoi faire en réponse au clic :

 

animation_4.html

<!DOCTYPE html>
<html>
    <head>

        <meta charset="UTF-8">
        <title>JavaScript</title>

        <script type="text/javascript" language="JavaScript" src="jquery-1.12.4.js"></script>

        <script type="text/javascript" language="JavaScript">

		   function anim_big(classe)
		   {
		     $(classe).animate({
                opacity: '1.0',
                width: '600px',
                left: '100px',
                top: '100px'
               }, 400);
		   }
		   
		   function anim_small(classe, leftpixels)
		   {
		     $(classe).animate({
                opacity: '0.25',
                width: '100px',
                left: leftpixels,
                top: '20px'
               }, 400);
		   }
		   
           $(document).ready(function(){
             
             $(".image-1").click(function(){
			   if($('.image-1').css('opacity') == 1.0) {
                  anim_small(".image-1", '20px');
				  anim_big(".image-2");
               } else {
			      anim_big(".image-1");
			      anim_small(".image-2", '140px');
			      anim_small(".image-3", '260px');
			   }
             });
             
             $(".image-2").click(function(){
			   if($('.image-2').css('opacity') == 1.0) {
                  anim_small(".image-2", '140px');
				  anim_big(".image-3");
               } else {
			     anim_big(".image-2");
			     anim_small(".image-1", '20px');
			     anim_small(".image-3", '260px');
			   }
             });
			 
			 $(".image-3").click(function(){
			   if($('.image-3').css('opacity') == 1.0) {
                  anim_small(".image-3", '260px');
				  anim_big(".image-1");
               } else {
			     anim_big(".image-3");
			     anim_small(".image-1", '20px');
			     anim_small(".image-2", '140px');
			   }
             });
           });

        </script>

        <style>
        body { width:960px; margin:0 auto; background-color:#eeeeee; font-size:36px; }
        .section { background-color:white; text-align:left; margin:80px 0px; padding:80px 0px; min-height:500px; position:relative; }
        img { position:absolute; top:20px; opacity:0.25; width:100px; }
        .image-1 { left:20px; }
        .image-2 { left:140px; }
        .image-3 { left:260px; }
        </style>

    </head>

    <body>

        <div class="section">

            <img class="image-1" src="http://www.web-design-codex.fr/wp-content/uploads/2014/11/portugal.jpg">

            <img class="image-2" src="http://www.web-design-codex.fr/wp-content/uploads/2015/03/portugal2.jpg">

            <img class="image-3" src="http://www.web-design-codex.fr/wp-content/uploads/2015/03/portugal3.jpg">

        </div>

    </body>

</html>