Header
anipassion.com
Partagez | 

Animer le contenu d'un bloc :: mouvement haut/bas

Message Sujet: Animer le contenu d'un bloc :: mouvement haut/bas   Ven 7 Sep - 7:35

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Miettes

Doyenne
Bons Points (BP) : 233
Voir le profil de l'utilisateur
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,
  • un bloc secondaire (qui aura pour nom "bloc2"). Ce bloc sera celui qui contiendra l'image et le contenu.

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 image et mon texte -->
         </div>
      </div>
      <!-- Fin du premier bloc -->
   </div>

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

   <div id="conteneur">
      <!-- DEBUT du premier bloc -->
      <div class="bloc1">
         <div class="bloc2">
            <img src="http://i44.servimg.com/u/f44/13/84/02/71/l10.jpg" alt="mon image" />
            <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>
      </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">
            <img src="http://i44.servimg.com/u/f44/13/84/02/71/l10.jpg" alt="mon image" />
            <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>
      </div>
      <!-- Fin du premier bloc -->
      
      <!-- DEBUT du second bloc -->
      <div class="bloc1">
         <div class="bloc2">
            <img src="http://i44.servimg.com/u/f44/13/84/02/71/l10.jpg" alt="mon image" />
            <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>
      </div>
      <!-- Fin du second bloc -->
      
      <!-- DEBUT du troisième bloc -->
      <div class="bloc1">
         <div class="bloc2">
            <img src="http://i44.servimg.com/u/f44/13/84/02/71/l10.jpg" alt="mon image" />
            <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>
      </div>
      <!-- Fin du troisième bloc -->
      
      <!-- DEBUT du quatrième bloc -->
      <div class="bloc1">
         <div class="bloc2">
            <img src="http://i44.servimg.com/u/f44/13/84/02/71/l10.jpg" alt="mon image" />
            <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>
      </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,
  • une couleur de texte noire,
  • le texte est écrit en Comic sans ms et en taille 12px,
  • le texte est centré,
  • 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 */
   color:black; /* Couleur du texte */
   font-family: Comic sans ms; /* Police */
   font-size: 12px; /* Taille de la police */
   text-align:center; /* Texte centré */
   margin:4px; /* L'espace entre mes blocs */
   }

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

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 */
   color:black; /* Couleur du texte */
   font-family: Comic sans ms; /* Police */
   font-size: 12px; /* Taille de la police */
   text-align:center; /* Texte centré */
   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 */
   color:black; /* Couleur du texte */
   font-family: Comic sans ms; /* Police */
   font-size: 12px; /* Taille de la police */
   text-align:center; /* Texte centré */
   margin:4px; /* L'espace entre mes blocs */
   overflow:hidden; /* On empêche le texte de sortir */
   float:left; /* On aligne les blocs à gauche */
   }
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:
 

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 */
   color:black; /* Couleur du texte */
   font-family: Comic sans ms; /* Police */
   font-size: 12px; /* Taille de la police */
   text-align:center; /* Texte centré */
   margin:4px; /* L'espace entre mes blocs */
   overflow:hidden; /* On empêche le texte de sortir */
   float:left; /* On aligne les blocs à gauche */
   }

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,
  • se déclanchera quand la souris survolera ou quittera le bloc1,
  • qui fera monter ou descendre l'image et donc apparaitre ou masquer 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 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 afficher le texte sera là -->
   });
   $(".bloc1").mouseout(function(){
      $<-- L'animation pour cacher 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 toutes les images se décalent vers le haut, mais seulement celle 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, je fais monter l'image pour voir le texte
On a donc notre bloc2 (qui contient l'image et le texte) qui est dans un bloc1 avec une hauteur précise. Cette hauteur correspond à la hauteur de notre image. L'idée ici, c'est de faire remontrer le bloc2 d'autant de pixels que la hauteur de l'image.
Pour comprendre a écrit:
Dans notre exemple, notre image fait 150px de haut. Le bloc1 a donc une hauteur de 150px.

Pour pouvoir voir le texte, on va donc devoir faire remontrer le bloc2 de 150px.
On va donc utiliser un margin-top négatif de 150px ce qui donne
Code:
$(".bloc1").mouseover(function(){
      $(this).children(".bloc2").animate({
         marginTop : "-150px"
      }, {queue:false, duration:1500} );
   });
Idea le "queue" et "duration" sont des attributs de la fonction animation.
-> ici, on a mis "queue:false" parce que nous n'avons pas d'animation en cascade, mais une seule.
-> duration : plus la valeur est proche de 0, plus l'animation sera rapide.

5 :: Quand je passe la souris sur le bloc1, je fais descendre l'image pour cacher le texte
Ici, même principe que précédemment, sauf que cette fois, on replace le margin-top à 0
Code:
$(".bloc1").mouseout(function(){
      $(this).children(".bloc2").animate({
         marginTop : "0px"
      }, {queue:false, duration:1500} );
   });


Au final, vous avez donc ce code javascript
Code:
$(document).ready(function(){
   $(".bloc1").mouseover(function(){ <!-- quand la souris survole le bloc 1 -->
      $(this).children(".bloc2").animate({
         marginTop : "-150px" <!-- l'image se décale vers le haut -->
      }, {queue:false, duration:1500} );
   });
   $(".bloc1").mouseout(function(){ <!-- quand la souris quitte le bloc 1 -->
      $(this).children(".bloc2").animate({
         marginTop : "0px" <!-- l'image se décale vers le bas et reprend sa position initiale -->
      }, {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 */
   color:black; /* Couleur du texte */
   font-family: Comic sans ms; /* Police */
   font-size: 12px; /* Taille de la police */
   text-align:center; /* Texte centré */
   margin:4px; /* L'espace entre mes blocs */
   overflow:hidden; /* On empêche le texte de sortir */
   float:left; /* On aligne les blocs à gauche */
   }

</style>

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

$(document).ready(function(){
   $(".bloc1").mouseover(function(){ <!-- quand la souris survole le bloc 1 -->
      $(this).children(".bloc2").animate({
         marginTop : "-150px" <!-- l'image se décale vers le haut -->
      }, {queue:false, duration:1500} );
   });
   $(".bloc1").mouseout(function(){ <!-- quand la souris quitte le bloc 1 -->
      $(this).children(".bloc2").animate({
         marginTop : "0px" <!-- l'image se décale vers le bas et reprend sa position initiale -->
      }, {queue:false, duration:1500} );
   });
 
});
-->
</script>

   </head>
   <body>

   <div id="conteneur">
      <!-- DEBUT du premier bloc -->
      <div class="bloc1">
         <div class="bloc2">
            <img src="http://i44.servimg.com/u/f44/13/84/02/71/l10.jpg" alt="mon image" />
            <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>
      </div>
      <!-- Fin du premier bloc -->
      
      <!-- DEBUT du second bloc -->
      <div class="bloc1">
         <div class="bloc2">
            <img src="http://i44.servimg.com/u/f44/13/84/02/71/l10.jpg" alt="mon image" />
            <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>
      </div>
      <!-- Fin du second bloc -->
      
      <!-- DEBUT du troisième bloc -->
      <div class="bloc1">
         <div class="bloc2">
            <img src="http://i44.servimg.com/u/f44/13/84/02/71/l10.jpg" alt="mon image" />
            <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>
      </div>
      <!-- Fin du troisième bloc -->
      
      <!-- DEBUT du quatrième bloc -->
      <div class="bloc1">
         <div class="bloc2">
            <img src="http://i44.servimg.com/u/f44/13/84/02/71/l10.jpg" alt="mon image" />
            <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>
      </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
Animer le contenu d'un bloc :: mouvement haut/bas
Page 1 sur 1
 Sujets similaires
-
» Des onglets en haut et en bas du contenu ?
» Modification de l'espace entre le cadre et le contenu & bannière en haut
» Bouton en mouvement
» Du haut des alpages
» Galerie de banniere non animer
Réponse rapide

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

Qui est en ligne ?

SoP en quelques chiffres

Nos étudiants ont posté un total de @messages@ messages.

Nous avons @membres_enregistres@ étudiants inscrits dans l’école.

Le dernier dossier validé est celui de @dernier_membre@.

@@membres_anniversaire_aujourdhui?@membres_anniversaire_aujourdhui=Il/Elle fête son anniversaire aujourd'hui : @membres_anniversaire_aujourdhui$&@$Ils fêtent leur anniversaire aujourd'hui : @membres_anniversaire_aujourdhui$, @@$Aucun membre ne fête son anniversaire aujourd'hui. @@

Ils étaient là hier

@derniers_membres_connectes$, @

Liste de présence

@membres_connectes$, @

La DirectionLes AssistantsLes SurveillantsLes ArtistesLes InspecteursLes PitresLes IntervenantsLes Doyens