Astuces Forumactif
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.
Membres connectés récemment
Voir tous les membres

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


2 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Freedom Sun
Freedom Sun
https://rastaclub.forumactif.com/forum

MessageFreedom Sun Dim 29 Sep 2024 - 23:48

Bonjour les amis(e), ⁣ hinhin

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.  clin oeil


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 :  Valid

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 :  Enregistr  et publier  Ajout

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 :  Enregistr  et publier  Ajout

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

À bientôt.

fred9545 aime ce message

Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Lun 30 Sep 2024 - 7:49

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



Bri, fred9545 et Freedom Sun aiment ce message

Voir le sujet précédent Voir le sujet suivant Revenir en haut

Créer un compte ou se connecter pour répondre

Vous devez être membre pour répondre.

S'enregistrer

Rejoignez notre communauté ! C'est facile !


S'enregistrer

Connexion

Vous êtes déjà membre ? Aucun soucis, cliquez ici pour vous connecter.


Connexion

 
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum