[Phpbb3] Mettre un effet de tremblement sur les avatars ou image au passage de la souris

Bonjour les amis(e), ⁣

Désolé @Milouze14 (Phil), j'ai voulu poser ce tutoriel à la catégorie initiale, le bouton "Nouveau" était absent, j'ai donc mis ceci ici, en espérant que tu puisses le déplacer, là où il doit être, ou l'effacer ! ...
Est-il possible que je puisse avoir accès à cette catégorie "Nouveau" pour que je puisse y mettre d'autre Tutoriel par la suite ?
Enfin, si cela te convient, bien évidemment... Si tu n'es pas ok, je comprendrai ta décision, et rien ne changera pour moi, c'est cool.  


Mettre un effet de tremblement sur les avatars ou image au passage de la souris,

Ajoutez ceci dans votre Feuille de style CSS :

Code:

/**Début du code Mettre un effet de tremblement sur les avatars ou image au passage de la souris**/
 div.avatartrem img:hover {
  animation: shake 0.5s;
  animation-iteration-count: infinite;
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}  
/**Fin du code Mettre un effet de tremblement sur les avatars ou image au passage de la souris**/


Puis :  

Vous pouvez régler la vitesse du tremblement :

Code:

animation: shake 0.5s;

Dans votre template index_box cherchez le code de l'avatar :

Code:

<!-- BEGIN avatar -->
         <span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
         <!-- END avatar -->

Puis collez la div à chaque extrémité :

Code:

<div class="avatartrem"> </div>

Ce qui donnera :

Code:

<!-- BEGIN avatar -->
                  <div class="avatartrem"> <span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span> </div>
         <!-- END avatar -->

Puis :    et publier  

Si vous souhaitez aussi voir l'avatar trembler dans les posts :

Dans la template viewtopic_body cherchez le code de l'avatar :

Code:

{postrow.displayed.POSTER_AVATAR}

Puis collez la div à chaque extrémité :

Code:

<div class="avatartrem"> </div>

Ce qui donnera :

Code:

<div class="avatartrem"> {postrow.displayed.POSTER_AVATAR} </div>

Puis :    et publier  

En espérant que ce tremblement vous plaira...    

À bientôt.

@Freedom Sun,
merci pour ce tutoriel Stefano
Tu peux désormais poster de nouvelles astuces ,
ce qui ne me pause aucun problème cher ami .