Header
Partagez | 

Animer le contenu d'un bloc :: jouer avec l'opacité

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Miettes

Doyenne
Bons Points (BP) : 113
Voir le profil de l'utilisateur

Message Sujet: Animer le contenu d'un bloc :: jouer avec l'opacité   Jeu 16 Aoû - 16:41

Bonjour à tous Smile

Dans ce tutoriel, nous allons apprendre à faire ceci



Ce tuto va se divisier en 3 parties :


Comme nous allons travailler ce code sur une page html, nous allons tous partir de la même base, qui est la suivante :
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>Tutoriel "Animation sur un bloc"</title>
      
<style type="text/css">

/* Le CSS sera ici */

</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" >
<!--

   <!-- le code javascript sera ici -->

-->
</script>

   </head>
   <body>

<!-- le code html sera ici -->   

   </body>
</html>

Idea Rappel :
Code:
/* Pour mettre un commentaire/un repère non intéprété par le navigateur dans la partie CSS */

<!-- Pour mettre un commentaire/un repère non intéprété par le navigateur dans la partie javascript -->

<!-- Pour mettre un commentaire/un repère non intéprété par le navigateur dans la partie HTML -->

Idea Pré-requis :


Allez ! C'est parti !

La partie HTML



Tout ce qu'on va bosser dans cette partie sera à placer entre les balises
Code:
<body>

...

</body>

1 :: Tout d'abord, on va commencer par placer un bloc (div) à qui on va donner un nom unique (id). Ce bloc contiendra nos 4 blocs avec l'animation. Il va surtout nous servir pour placer nos 4 blocs dans la page (dans notre exemple = centrer)
Code:

   <div id="conteneur">
   
   
   </div>

2 :: Chacun de nos blocs sera composé de la même façon :
  • un bloc principal (qui aura pour nom "bloc1"). Ce bloc sera celui qu'on observera pour déclancher l'animation. Il contiendra un bloc secondaire et une image,
  • un bloc secondaire (qui aura pour nom "bloc2"). Ce bloc sera celui qui contiendra notre texte.

On y va donc. Comme cette structure va revenir plusieurs fois dans notre page, on va utiliser "class" pour nommer nos blocs
Code:

   <div id="conteneur">
      <!-- DEBUT du premier bloc -->
      <div class="bloc1">
         <div class="bloc2">
            <!-- Ici se trouvera le code de mon texte -->
         </div>
         <!-- Ici se trouvera le code de mon image -->
      </div>
      <!-- Fin du premier bloc -->
   </div>

3 :: On va maintenant ajouter une image (balise img) et un paragraphe (balise p) à ce code.
Code:

   <div id="conteneur">
      <!-- DEBUT du premier bloc -->
      <div class="bloc1">
         <div class="bloc2">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc bibendum mauris vitae ante scelerisque vitae scelerisque nulla lobortis. Donec vitae luctus orci. Phasellus sed felis justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed hendrerit facilisis justo id hendrerit. Morbi aliquet justo molestie augue pharetra facilisis fringilla eros porttitor. Sed facilisis urna a est ornare convallis. Nunc rutrum imperdiet purus eget posuere. Praesent scelerisque quam a ligula porttitor eget volutpat ligula tempus. Nulla odio ipsum, iaculis eget iaculis nec, condimentum eget metus. In dignissim facilisis pellentesque. Aliquam ac dui dui, non facilisis mauris. Curabitur mi arcu, vestibulum sed volutpat et, congue at elit. Suspendisse potenti.</p>   
         </div>
         <img src="http://i44.servimg.com/u/f44/13/84/02/71/l10.jpg" alt="mon image" />
      </div>
      <!-- Fin du premier bloc -->
   </div>

4 :: Et comme je veux 4 blocs, je recopie le code 4 fois
Code:

   <div id="conteneur">
      <!-- DEBUT du premier bloc -->
      <div class="bloc1">
         <div class="bloc2">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc bibendum mauris vitae ante scelerisque vitae scelerisque nulla lobortis. Donec vitae luctus orci. Phasellus sed felis justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed hendrerit facilisis justo id hendrerit. Morbi aliquet justo molestie augue pharetra facilisis fringilla eros porttitor. Sed facilisis urna a est ornare convallis. Nunc rutrum imperdiet purus eget posuere. Praesent scelerisque quam a ligula porttitor eget volutpat ligula tempus. Nulla odio ipsum, iaculis eget iaculis nec, condimentum eget metus. In dignissim facilisis pellentesque. Aliquam ac dui dui, non facilisis mauris. Curabitur mi arcu, vestibulum sed volutpat et, congue at elit. Suspendisse potenti.</p>
         </div>
         <img src="http://i44.servimg.com/u/f44/13/84/02/71/l10.jpg" alt="mon image" />
      </div>
      <!-- Fin du premier bloc -->
      
      <!-- DEBUT du second bloc -->
      <div class="bloc1">
         <div class="bloc2">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc bibendum mauris vitae ante scelerisque vitae scelerisque nulla lobortis. Donec vitae luctus orci. Phasellus sed felis justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed hendrerit facilisis justo id hendrerit. Morbi aliquet justo molestie augue pharetra facilisis fringilla eros porttitor. Sed facilisis urna a est ornare convallis. Nunc rutrum imperdiet purus eget posuere. Praesent scelerisque quam a ligula porttitor eget volutpat ligula tempus. Nulla odio ipsum, iaculis eget iaculis nec, condimentum eget metus. In dignissim facilisis pellentesque. Aliquam ac dui dui, non facilisis mauris. Curabitur mi arcu, vestibulum sed volutpat et, congue at elit. Suspendisse potenti.</p>
         </div>
         <img src="http://i44.servimg.com/u/f44/13/84/02/71/l10.jpg" alt="mon image" />
      </div>
      <!-- Fin du second bloc -->
      
      <!-- DEBUT du troisième bloc -->
      <div class="bloc1">
         <div class="bloc2">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc bibendum mauris vitae ante scelerisque vitae scelerisque nulla lobortis. Donec vitae luctus orci. Phasellus sed felis justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed hendrerit facilisis justo id hendrerit. Morbi aliquet justo molestie augue pharetra facilisis fringilla eros porttitor. Sed facilisis urna a est ornare convallis. Nunc rutrum imperdiet purus eget posuere. Praesent scelerisque quam a ligula porttitor eget volutpat ligula tempus. Nulla odio ipsum, iaculis eget iaculis nec, condimentum eget metus. In dignissim facilisis pellentesque. Aliquam ac dui dui, non facilisis mauris. Curabitur mi arcu, vestibulum sed volutpat et, congue at elit. Suspendisse potenti.</p>
         </div>
         <img src="http://i44.servimg.com/u/f44/13/84/02/71/l10.jpg" alt="mon image" />
      </div>
      <!-- Fin du troisième bloc -->
      
      <!-- DEBUT du quatrième bloc -->
      <div class="bloc1">
         <div class="bloc2">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc bibendum mauris vitae ante scelerisque vitae scelerisque nulla lobortis. Donec vitae luctus orci. Phasellus sed felis justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed hendrerit facilisis justo id hendrerit. Morbi aliquet justo molestie augue pharetra facilisis fringilla eros porttitor. Sed facilisis urna a est ornare convallis. Nunc rutrum imperdiet purus eget posuere. Praesent scelerisque quam a ligula porttitor eget volutpat ligula tempus. Nulla odio ipsum, iaculis eget iaculis nec, condimentum eget metus. In dignissim facilisis pellentesque. Aliquam ac dui dui, non facilisis mauris. Curabitur mi arcu, vestibulum sed volutpat et, congue at elit. Suspendisse potenti.</p>
         </div>
         <img src="http://i44.servimg.com/u/f44/13/84/02/71/l10.jpg" alt="mon image" />
      </div>
      <!-- Fin du quatrième bloc -->
   </div>

Arrow Si vous observez votre code, ça ne ressemble à rien pour le moment
Spoiler:
 

Notre structure est prête. On passe maintenant à la mise en page Smile

La partie CSS



Avant de nous plonger dans notre code, on va réfléchir à "comment je veux mettre en page mes blocs ?". Personnellement, je suis partie sur un truc simple :
  • une largeur de 150px (qui correspond à la largeur de mon image),
  • une hauteur de 150px (qui correspond à la hauteur de mon image),
  • une couleur de fond blanche,
  • un cadre noir en trait plein d'1px d'épaisseur,
  • un espace de 4px entre mes blocs.


Tout ceci concerne mon "bloc1". Si je traduis en CSS
Code:
div.bloc1{
   width:150px; /* La largeur */
   height: 150px; /* La hauteur */
   background-color:white; /* Couleur de fond */
   border:1px solid black; /* Cadre */
   margin:4px; /* L'espace entre mes blocs */
   }

Pour le bloc contenant mon texte, là aussi quelque chose de simple
  • une couleur de texte noire,
  • le texte est écrit en Comic sans ms et en taille 12px,
  • le texte est centré,
  • un fond blanc,
  • une largeur de 150px,
  • une hauteur de 150px,
  • un ascenseur si jamais le texte dépasse la hauteur imposée.


Tout ceci concerne mon "bloc2". Si je traduis en CSS
Code:
div.bloc2{
   width:150px; /* La largeur */
   height: 150px; /* La hauteur */
   background-color:white; /* Couleur de fond */
   color:black; /* Couleur du texte */
   font-family: Comic sans ms; /* Police */
   font-size: 12px; /* Taille de la police */
   text-align:center; /* Texte centré */
   }

Arrow ça prend forme
Spoiler:
 
mais je sais ce que vous allez me dire :
1 :: le texte dépasse :/
2 :: les blocs se placent les uns en dessous des autres O_O
3 :: L'image se place en dessous du paragraphe alors qu'elle devrait être derrière

On y arrive Smile

1 :: Empêchons le texte de sortir
Pour cela, on va dire à notre bloc : "Je t'ordonne de ne rien afficher si ça dépasse la hauteur que je t'ai imposée". On va utiliser un overflow "hidden"
Code:
div.bloc1{
   width:150px; /* La largeur */
   height: 150px; /* La hauteur */
   background-color:white; /* Couleur de fond */
   border:1px solid black; /* Cadre */
   margin:4px; /* L'espace entre mes blocs */
   overflow:hidden; /* On empêche le texte de sortir */
   }
Spoiler:
 
Idea A noter : Si vous utilisez
Code:
overflow:auto;
une scrollbar (= ascenseur) s'affichera. Ici aussi le texte ne sortira plus Smile Mais dans le cas de notre animation, c'est inutile ^^
Spoiler:
 

2 :: On met les blocs côte à côte
Ici, on va tout simplement les aligner à gauche en utilisant la propriété "float"
Code:
div.bloc1{
   width:150px; /* La largeur */
   height: 150px; /* La hauteur */
   background-color:white; /* Couleur de fond */
   border:1px solid black; /* Cadre */
   margin:4px; /* L'espace entre mes blocs */
   overflow:hidden; /* On empêche le texte de sortir */
   float:left; /* On aligne les blocs à gauche */
   }
Spoiler:
 

3 :: Mettre l'image derrière le texte
On va dire au bloc contenant le texte : tu te places en haut à gauche dans le bloc1. Pour cela, on va utiliser la propriété css position:absolute.
Code:
div.bloc2{
   width:150px; /* La largeur */
   height: 150px; /* La hauteur */
   background-color:white; /* Couleur de fond */
   color:black; /* Couleur du texte */
   font-family: Comic sans ms; /* Police */
   font-size: 12px; /* Taille de la police */
   text-align:center; /* Texte centré */
   position:absolute; /* On place le bloc en haut à gauche dans le bloc1 */
   }
Le problème, c'est qu'en faisant ça, le texte ressort. On va donc également ajouter un overflow:auto pour mettre une scrollbar
Code:
div.bloc2{
   width:150px; /* La largeur */
   height: 150px; /* La hauteur */
   background-color:white; /* Couleur de fond */
   color:black; /* Couleur du texte */
   font-family: Comic sans ms; /* Police */
   font-size: 12px; /* Taille de la police */
   text-align:center; /* Texte centré */
   position:absolute; /* On place le bloc en haut à gauche dans le bloc1 */
   overflow:auto; /* la scrollbar */
   }

Spoiler:
 

Ahhhh ça prend forme ! Maintenant, on va centrer nos 4 blocs sur la page. Ici, on va donc s'intéresser au style du bloc "conteneur". On va lui donner une largeur (= la largeur de nos blocs + les espaces (margin * 2 * nombre de blocs * 2) => dans notre exemple = 4*150 + 4*2*4*2 = 600 + 40 = 640px) et on va lui dire de se centrer tout seul (margin:auto;)
Code:
div#conteneur{
   width:640px; /* La largeur du conteneur */
   margin:auto; /* On le centre dans la page */
   }

Spoiler:
 

Pour finir, on va correctement placer notre bloc "image", afin de ne pas avoir de souci avec l'animation.

Au final, vous avez donc ce css
Code:
div#conteneur{
   width:640px; /* La largeur du conteneur */
   margin:auto; /* On le centre dans la page */
   }
   
div.bloc1{
   width:150px; /* La largeur */
   height: 150px; /* La hauteur */
   background-color:white; /* Couleur de fond */
   border:1px solid black; /* Cadre */
   margin:4px; /* L'espace entre mes blocs */
   overflow:hidden; /* On empêche le texte de sortir */
   float:left; /* On aligne les blocs à gauche */
   }
   
div.bloc2{
   width:150px; /* La largeur */
   height: 150px; /* La hauteur */
   background-color:white; /* Couleur de fond */
   color:black; /* Couleur du texte */
   font-family: Comic sans ms; /* Police */
   font-size: 12px; /* Taille de la police */
   text-align:center; /* Texte centré */
   position:absolute; /* On place le bloc en haut à gauche dans le bloc1 */
   overflow:auto; /* la scrollbar */
   }

La partie "mise en page" est terminée. Il ne nous reste plus qu'à coder l'animation Smile

La partie javascript



Tout d'abord, je vous ai pré-maché le travail Smile En effet, dans la base du code fourni, j'ai déjà appelé la bibliothéque javascript (= la grosse base de donnée contenant des fonctions/animations pré-définies). Cela correspond à cette partie du code :
Code:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>

Ici, on va donc devoir faire une animation qui :
  • sera active dès que la page est chargée,
  • cachera le texte au départ,
  • se déclenchera quand la souris survolera ou quittera le bloc1,
  • fera apparaitre ou masquera le texte.


On y va donc.

1 :: Une animation active dès que la page est chargée
C'est tout simple, on va utiliser ce code
Code:
$(document).ready(function(){
   <!-- Le code sera ici -->
 
});
Idea Si on traduit : Quand ma page ($(document)) est chargée et affichée (ready), je lance la fonctione suivant (fonction()).

2 :: Une animation qui cachera le texte au départ
Autrement dit, on veut que le bloc ayant pour nom de class bloc2 ait une opacité nulle.
Code:
$(".bloc2").css({"opacity" : "0"});
Idea Si on traduit : Tous les éléments ayant pour nom de class "bloc2" ($(".bloc2")) auront pour css une opacité de 0, ce qui les rendra transparents (css({"opacity" : "0"})).
Idea Plus l'opacité est proche de 0, plus l'élement sera transparent. A l'inverse, plus l'opacité sera proche de 1, plus l'élement sera opaque.

2 :: Une animation qui se déclanchera quand la souris survole ou quitte le bloc1
On va devoir utiliser les fonctions prédéfinies
-> mouseover :: quand la souris passe sur le bloc
-> mouseout :: quand la souris quitte le bloc

Ce qui donne
Code:
$(".bloc1").mouseover(function(){
      <-- L'animation pour masquer le texte sera là -->
   });
   $(".bloc1").mouseout(function(){
      $<-- L'animation pour afficher le texte sera là -->
   });
Idea Si on traduit le premier : Quand je passe la souris (mouseover), sur l'élément ($("")) qui a pour nom de class "bloc1" (.bloc1), je lance la fonction suivante (fonction()).

4 :: Quand je passe la souris sur le bloc1, c'est le bloc2 qui est dans cette div qui s'anime
ça se complique un peu. En effet, ici, on va devoir bien dire à notre animation : "attention ! quand je passe ma souris sur le bloc1, je ne veux pas que tous les textes s'affichent, mais seulement celui qui est dans le bloc que je survole". On va donc utiliser ici l'attribut "children". Le code se présentera comme ça
Code:
$(this).children(".bloc2").animate({
         <-- les réglages de l'animation seront là -->
         );
Idea Si on traduit : l'élement qui appartient (children("")) au bloc que j'ai survolé ($(this)) et qui a pour nom de class "bloc2" (.bloc2) va s'animer (animate).

4 :: Quand je passe la souris sur le bloc1, j'affiche le texte
On a donc notre bloc2 (qui contient le texte) qui a pour opacité de départ 0. Nous, on veut l'afficher, et, dans mon exemple, j'ai choisi de faire en sorte qu'on voit encore un peu l'image derrière. Je vais donc donner à mon bloc2 une opacité de 80% quand je le survole, ce qui donne
Code:
$(".bloc1").mouseover(function(){
      $(this).children(".bloc2").animate({
         opacity : "0.8"
      }, {queue:false, duration:1500} );
   });

5 :: Quand je passe la souris sur le bloc1, je cache le texte
Ici, même principe que précédemment, sauf que cette fois, on replace l'opacité à 0
Code:
$(".bloc1").mouseout(function(){
      $(this).children(".bloc2").animate({
         opacity : "0"
      }, {queue:false, duration:1500} );
   });


Au final, vous avez donc ce code javascript
Code:
$(document).ready(function(){
   $(".bloc2").css({"opacity" : "0"}); <!-- on cache tous les blocs contenant le texte -->
   $(".bloc1").mouseover(function(){ <!-- quand la souris survole le bloc 1 -->
      $(this).children(".bloc2").animate({
         opacity : "0.8" <!-- le texte apparait -->
      }, {queue:false, duration:1500} );
   });
   $(".bloc1").mouseout(function(){ <!-- quand la souris quitte le bloc 1 -->
      $(this).children(".bloc2").animate({
         opacity : "0"  <!-- le texte disparait  -->
      }, {queue:false, duration:1500} );
   });
 
});

-------------

Voila c'est terminé ^^ Voici donc le code complet de votre page html
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>Tutoriel "Animation sur un bloc"</title>
      
<style type="text/css">
   
div#conteneur{
   width:640px; /* La largeur du conteneur */
   margin:auto; /* On le centre dans la page */
   }
   
div.bloc1{
   width:150px; /* La largeur */
   height: 150px; /* La hauteur */
   background-color:white; /* Couleur de fond */
   border:1px solid black; /* Cadre */
   margin:4px; /* L'espace entre mes blocs */
   overflow:hidden; /* On empêche le texte de sortir */
   float:left; /* On aligne les blocs à gauche */
   }
   
div.bloc2{
   width:150px; /* La largeur */
   height: 150px; /* La hauteur */
   background-color:white; /* Couleur de fond */
   color:black; /* Couleur du texte */
   font-family: Comic sans ms; /* Police */
   font-size: 12px; /* Taille de la police */
   text-align:center; /* Texte centré */
   position:absolute; /* On place le bloc en haut à gauche dans le bloc1 */
   overflow:auto; /* la scrollbar */
   }

</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" >
<!-- //

$(document).ready(function(){
   $(".bloc2").css({"opacity" : "0"}); <!-- on cache tous les blocs contenant le texte -->
   $(".bloc1").mouseover(function(){ <!-- quand la souris survole le bloc 1 -->
      $(this).children(".bloc2").animate({
         opacity : "0.8" <!-- le texte apparait -->
      }, {queue:false, duration:1500} );
   });
   $(".bloc1").mouseout(function(){ <!-- quand la souris quitte le bloc 1 -->
      $(this).children(".bloc2").animate({
         opacity : "0"  <!-- le texte disparait  -->
      }, {queue:false, duration:1500} );
   });
 
});
-->
</script>

   </head>
   <body>

   <div id="conteneur">
      <!-- DEBUT du premier bloc -->
      <div class="bloc1">
         <div class="bloc2">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc bibendum mauris vitae ante scelerisque vitae scelerisque nulla lobortis. Donec vitae luctus orci. Phasellus sed felis justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed hendrerit facilisis justo id hendrerit. Morbi aliquet justo molestie augue pharetra facilisis fringilla eros porttitor. Sed facilisis urna a est ornare convallis. Nunc rutrum imperdiet purus eget posuere. Praesent scelerisque quam a ligula porttitor eget volutpat ligula tempus. Nulla odio ipsum, iaculis eget iaculis nec, condimentum eget metus. In dignissim facilisis pellentesque. Aliquam ac dui dui, non facilisis mauris. Curabitur mi arcu, vestibulum sed volutpat et, congue at elit. Suspendisse potenti.</p>
         </div>
         <img src="http://i44.servimg.com/u/f44/13/84/02/71/l10.jpg" alt="mon image" />
      </div>
      <!-- Fin du premier bloc -->
      
      <!-- DEBUT du second bloc -->
      <div class="bloc1">
         <div class="bloc2">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc bibendum mauris vitae ante scelerisque vitae scelerisque nulla lobortis. Donec vitae luctus orci. Phasellus sed felis justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed hendrerit facilisis justo id hendrerit. Morbi aliquet justo molestie augue pharetra facilisis fringilla eros porttitor. Sed facilisis urna a est ornare convallis. Nunc rutrum imperdiet purus eget posuere. Praesent scelerisque quam a ligula porttitor eget volutpat ligula tempus. Nulla odio ipsum, iaculis eget iaculis nec, condimentum eget metus. In dignissim facilisis pellentesque. Aliquam ac dui dui, non facilisis mauris. Curabitur mi arcu, vestibulum sed volutpat et, congue at elit. Suspendisse potenti.</p>
         </div>
         <img src="http://i44.servimg.com/u/f44/13/84/02/71/l10.jpg" alt="mon image" />
      </div>
      <!-- Fin du second bloc -->
      
      <!-- DEBUT du troisième bloc -->
      <div class="bloc1">
         <div class="bloc2">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc bibendum mauris vitae ante scelerisque vitae scelerisque nulla lobortis. Donec vitae luctus orci. Phasellus sed felis justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed hendrerit facilisis justo id hendrerit. Morbi aliquet justo molestie augue pharetra facilisis fringilla eros porttitor. Sed facilisis urna a est ornare convallis. Nunc rutrum imperdiet purus eget posuere. Praesent scelerisque quam a ligula porttitor eget volutpat ligula tempus. Nulla odio ipsum, iaculis eget iaculis nec, condimentum eget metus. In dignissim facilisis pellentesque. Aliquam ac dui dui, non facilisis mauris. Curabitur mi arcu, vestibulum sed volutpat et, congue at elit. Suspendisse potenti.</p>
         </div>
         <img src="http://i44.servimg.com/u/f44/13/84/02/71/l10.jpg" alt="mon image" />
      </div>
      <!-- Fin du troisième bloc -->
      
      <!-- DEBUT du quatrième bloc -->
      <div class="bloc1">
         <div class="bloc2">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc bibendum mauris vitae ante scelerisque vitae scelerisque nulla lobortis. Donec vitae luctus orci. Phasellus sed felis justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed hendrerit facilisis justo id hendrerit. Morbi aliquet justo molestie augue pharetra facilisis fringilla eros porttitor. Sed facilisis urna a est ornare convallis. Nunc rutrum imperdiet purus eget posuere. Praesent scelerisque quam a ligula porttitor eget volutpat ligula tempus. Nulla odio ipsum, iaculis eget iaculis nec, condimentum eget metus. In dignissim facilisis pellentesque. Aliquam ac dui dui, non facilisis mauris. Curabitur mi arcu, vestibulum sed volutpat et, congue at elit. Suspendisse potenti.</p>
         </div>
         <img src="http://i44.servimg.com/u/f44/13/84/02/71/l10.jpg" alt="mon image" />
      </div>
      <!-- Fin du quatrième bloc -->
   </div>

   </body>
</html>




Vous rencontrez un souci avec ce tutoriel ? Venez poser votre question [ici].

Idea N'oubliez pas de lire et de suivre les [règles de la section].
Revenir en haut Aller en bas
avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Miettes

Doyenne
Bons Points (BP) : 113
Voir le profil de l'utilisateur

Message Sujet: Re: Animer le contenu d'un bloc :: jouer avec l'opacité   Mer 4 Sep - 9:24

Attention concernant les commentaires de la partie javascript :

-> Si votre code est mis dans le html
Code:
<!-- Commentaire -->
-> Si votre code est mis dans une page javascript
Code:
/* Commentaire */
Revenir en haut Aller en bas
Animer le contenu d'un bloc :: jouer avec l'opacité
Page 1 sur 1
 Sujets similaires
-
» Tanuki, Tanuki veux-tu jouer avec moi ?
» pour jouer avec les chiffres et les nombres
» Chucky • Tu veux jouer avec moi?
» jouer avec le pouce ou pas
» probleme avec call of duty black ops
Réponse rapide

School of Progress :: La bibliothèque :: Tutoriels :: Informatique :: Codage+