Membres connectés récemment
[Phpbb3] Mettre un effet de tremblement sur les avatars ou image au passage de la souris
2 participants
Page 1 sur 1 • Partagez
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 :
Vous pouvez régler la vitesse du tremblement :
Dans votre template index_box cherchez le code de l'avatar :
Puis collez la div à chaque extrémité :
Ce qui donnera :
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 :
Puis collez la div à chaque extrémité :
Ce qui donnera :
En espérant que ce tremblement vous plaira...
À bientôt.
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**/
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>
En espérant que ce tremblement vous plaira...
À bientôt.
fred9545 aime ce message
@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 .
merci pour ce tutoriel Stefano
Tu peux désormais poster de nouvelles astuces ,
ce qui ne me pause aucun problème cher ami .
Bri, fred9545 et Freedom Sun aiment ce message
Sujets similaires
Créer un compte ou se connecter pour répondre
Vous devez être membre pour répondre.
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum