AccueilAccueil  FAQFAQ  RechercherRechercher  S'enregistrerS'enregistrer  ConnexionConnexion  

Le nom d'un effet :)


Maliceavatar
P'tit Hitien
Sexe : FémininMessages : 234p.a : 17Age : 22Inscription : 11/12/2010
Bonjour bonjour :)
Je suis à la recherche de l'appelation utilisée pour qualifier l'effet de glissage que peuvent effectuer textes ou images. Je poste ici car les noms des forums le font sur la page d'accueil au passage de la souris, donc j'imagine qu'au moins un codeur ici doit savoir :P
Je ne demande aucun code, seulement le nom, pour que je puisse me renseigner sur la procédure n.n
(À moins qu'une âme bienveillante accepte de me faire un tuto là dessus, mais ce n'est qu'une suggestion :p)


Edit : Ça y est, j'ai trouvé, mais maintenant je suis à la recherche d'un autre effet, alors autant ne pas créer 36 000 sujets :)
J'aimerais savoir comment on appelle le principe qui permet que quand on passe la souris sur une image, l'image se décale par la droite ou la gauche (en "s'effaçant") et laisse place à du texte ?
Ha, je suis pas très précise, mais j'fais de mon mieux :/

Edit 2 : HaHA ! J'ai enfin trouvé un forum qui a installé ce que je cherchais : [Vous devez être inscrit et connecté pour voir ce lien]
Moi je cherche le même principe que pour les liens utiles sur la PA, mais le panneau passant sur la droite ou la gauche :)

Merci à tous pour vos réponses !


[Vous devez être inscrit et connecté pour voir cette image]
Avatar par K.Lyud ♥

Pastoral scene of the gallant south,
The bulging eyes and the twisted mouth,
Scent of magnolias, sweet and fresh,
Then the sudden smell of burning flesh.

Malicehttp://malicetory.monalliance.netVen 15 Juin - 18:11
Alyshaavatar
P'tit Hitien
Sexe : FémininMessages : 372p.a : 59Age : 29Inscription : 06/10/2011
Hellow ♥

Je pense que l'effet que tu recherches est : "les transitions en css". ça fonctionne que sur les navigateurs récents (html 5 et css3) ;)

Un petit article dessus avec des exemples : [Vous devez être inscrit et connecté pour voir ce lien]

Il y aussi le jquery qui peut le faire mais je ne connais le nom exact et c'est plus compliqué que le css ^^

a+


problème avec un code du LB ? Mp moi ♥


Alyshahttp://hobbitrpg.forumactif.orgVen 15 Juin - 18:40
.Fulsiaavatar
P'tit Hitien
Sexe : FémininMessages : 604p.a : 279Age : 23Inscription : 16/12/2010
Tu pourras trouver plusieurs tutos sur Cssactif sur les transitions :)


Beuuuh.
.Fulsiahttp://www.rosebud.forumotion.comSam 16 Juin - 12:38
Maliceavatar
P'tit Hitien
Sexe : FémininMessages : 234p.a : 17Age : 22Inscription : 11/12/2010
Merci alysha, je suis allée voir l'article, je pense avoir compris mais ne n'ai pas essayé donc je n'en suis pas sûre x)

@.Fulsia : je n'ai pas le temps maintenant mais j'irai voir. Merci du coup de main ;)


[Vous devez être inscrit et connecté pour voir cette image]
Avatar par K.Lyud ♥

Pastoral scene of the gallant south,
The bulging eyes and the twisted mouth,
Scent of magnolias, sweet and fresh,
Then the sudden smell of burning flesh.

Malicehttp://malicetory.monalliance.netSam 16 Juin - 13:15
.Fulsiaavatar
P'tit Hitien
Sexe : FémininMessages : 604p.a : 279Age : 23Inscription : 16/12/2010
Voici le lien du code :) [Vous devez être inscrit et connecté pour voir ce lien]


Beuuuh.
.Fulsiahttp://www.rosebud.forumotion.comSam 16 Juin - 13:30
Maliceavatar
P'tit Hitien
Sexe : FémininMessages : 234p.a : 17Age : 22Inscription : 11/12/2010
Merci beaucoup, j'ai compris ce que je n'avais pas compris en lisant l'article donné par Alysha.
Cette demande n'est donc plus d'actualité :D

Edit : Tant que j'y suis, j'en profite pour ajouter quelque chose à ma demande :
J'aimerais savoir comment on appelle le principe qui permet que quand on passe la souris sur une image, l'image se décale par la droite ou la gauche (en "s'effaçant") et laisse place à du texte ?
Ha, je suis pas très précise, mais j'fais de mon mieux :/

Edit 2 : Je cherche sur CSSActif, mais ne connaissant pas le nom de l'effet, c'est un peu compliqué :/

Edit 3 : HaHA ! J'ai enfin trouvé un forum qui a installé ce que je cherchais : [Vous devez être inscrit et connecté pour voir ce lien]
Moi je cherche le même principe que pour les liens utiles sur la PA, mais le panneau passant sur la droite ou la gauche :)

Edit 4 : Bon, je commence à me faire un petit monologue, m'enfin bon ...
En fait, je suis idiote, puisqu'il s'agit du même principe que précédemment, soit les transitions. J'ai réussi à faire quelque chose, mais je me retrouve avec un problème que je n'arrive pas à fixer, donc j'ai besoin de votre aide.
Déjà, voici mon forum test : [Vous devez être inscrit et connecté pour voir ce lien]
(ne faites pas attention aux couleurs, elles ne sont pas là pour faire joli mais pour que je puisse voir ce que je fais :P)
Donc sur l'image 400*60px, quand on passe la souris sur la partie droite, aucun probleme : le panneau de droite se décale pour laisser voir ... du vide pour l'instant (jai pas encore trouvé comment mettre un texte derrière, mais ça va venir !)
Mon probleme est avec le panneau de gauche : lorsqu'on passe la souris, il se décale bien, mais le panneau de droite aussi, puisqu'il est aligné avec le panneau de gauche ! J'ai essayé de le fixer avec un
Code:
right: 0px
mais ça ne marche pas.
Ayant résolu mon problème, j'ai enlevé mes codes :)

Merci à celui ou celle qui pourra m'aider :/


[Vous devez être inscrit et connecté pour voir cette image]
Avatar par K.Lyud ♥

Pastoral scene of the gallant south,
The bulging eyes and the twisted mouth,
Scent of magnolias, sweet and fresh,
Then the sudden smell of burning flesh.

Malicehttp://malicetory.monalliance.netSam 16 Juin - 15:02
Maliceavatar
P'tit Hitien
Sexe : FémininMessages : 234p.a : 17Age : 22Inscription : 11/12/2010
Ce que j'aime chez moi, c'est que je suis capable de faire un monologue sans me lasser ♥
(Bon, je sais que les double postes c'est pas bien, mais ça commence à faire beaucoup d'édits, ça !)

J'ai finalement réussi à résoudre mon problème, en passant par une phase d'intense réflexion et en optant pour l'option d'un tableau. Ça a été compliqué, mais j'y suis :D J'ai réussi \o/
Je suis fière de moi.

En attendant, ce sujet peut finalement être fermé, puisque je suis tellement débrouillarde que j'ai résolu mon problème TOUTE SEULE
*se lance ses fleurs*

Bonne soirée ;)


[Vous devez être inscrit et connecté pour voir cette image]
Avatar par K.Lyud ♥

Pastoral scene of the gallant south,
The bulging eyes and the twisted mouth,
Scent of magnolias, sweet and fresh,
Then the sudden smell of burning flesh.

Malicehttp://malicetory.monalliance.netSam 16 Juin - 19:37
K.Lyudavatar
Modérateur - Got the power o/
Sexe : FémininMessages : 2083p.a : 245Age : 26Inscription : 22/12/2010
Hello !
Tu pourrais donner la solution que t'as trouvé, ca pourrait peut être en aider d'autres =)


[Vous devez être inscrit et connecté pour voir cette image]
Ava Silly
K.LyudSam 16 Juin - 19:40
Maliceavatar
P'tit Hitien
Sexe : FémininMessages : 234p.a : 17Age : 22Inscription : 11/12/2010
Ouaip :)

Code Html (PA)
Code:
<table cellpadding="0" cellspacing="0" border="none" style="width: 400px; "><tr>
   <td style="max-width:200px; height:60px; white-space: nowrap; overflow:hidden;">
      <img src="http://i.imgur.com/3RLYc.png" id="Staff_Gauche" style="float:center;" align="right" />
   </td>
   <td align="right" style="max-width:200px; height:60px; white-space: nowrap; overflow:hidden;">
      <img src="http://i.imgur.com/cP9S3.png" id="Staff_Droite" style="float:center;" align="left" />
   </td>
</tr></table>
J'ai opté pour un tableau en fixant la largeur des colonnes. Comme y avait toujours le probleme de l'image de droite qui se décalait en même temps que l'image de gauche, j'ai aligné la cellule de droite à droite, pour éviter qu'elle prenne son repère sur la cellule de gauche (qui se décale sur la gauche au passage de la souris avec l'effet de transition)
Vous me suivez ?
"white-space: nowrap" permet d'empêcher le retour à la ligne (sinon l'image passe en dessous et non sur le côté quand elle se déplace)
"overflow:hidden" permet de cacher l'image lorsqu'elle sort du tableau (d'où l'effet de disparition, si on peut l'appeler comme ça).

Voici mon CSS :
Code:
#Staff_Droite {
  top: 0px;
  margin-left: 0px;
  transition: margin-left;
    -webkit-transition: margin-left;
    -moz-transition: margin-left;
    -ms-transition: margin-left;
    -o-transition: margin-left;
  transition-duration: 1s;
    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -ms-transition-duration: 1s;
    -o-transition-duration: 1s;
}

#Staff_Droite:hover {
  top: 0px;
  margin-left: 190px;
}

#Staff_Gauche {
  top: 0px;
  margin-left: 0px;
  transition: margin-left;
    -webkit-transition: margin-left;
    -moz-transition: margin-left;
    -ms-transition: margin-left;
    -o-transition: margin-left;
  transition-duration: 1s;
    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -ms-transition-duration: 1s;
    -o-transition-duration: 1s;
}

#Staff_Gauche:hover {
  top: 0px;
  margin-left: -190px;
}

Voilà ! Je ne suis pas une pro en explications, mais si ça peut aider quelqu'un ;)


[Vous devez être inscrit et connecté pour voir cette image]
Avatar par K.Lyud ♥

Pastoral scene of the gallant south,
The bulging eyes and the twisted mouth,
Scent of magnolias, sweet and fresh,
Then the sudden smell of burning flesh.

Malicehttp://malicetory.monalliance.netSam 16 Juin - 19:48
K.Lyudavatar
Modérateur - Got the power o/
Sexe : FémininMessages : 2083p.a : 245Age : 26Inscription : 22/12/2010
C'est super cool, tu veux bien qu'on s'en serve pour faire un tuto ?


[Vous devez être inscrit et connecté pour voir cette image]
Ava Silly
K.LyudSam 16 Juin - 21:55
Maliceavatar
P'tit Hitien
Sexe : FémininMessages : 234p.a : 17Age : 22Inscription : 11/12/2010
Oui pas de probleme :)


[Vous devez être inscrit et connecté pour voir cette image]
Avatar par K.Lyud ♥

Pastoral scene of the gallant south,
The bulging eyes and the twisted mouth,
Scent of magnolias, sweet and fresh,
Then the sudden smell of burning flesh.

Malicehttp://malicetory.monalliance.netDim 17 Juin - 7:13
Contenu sponsorisé
Contenu sponsorisé

Le nom d'un effet :)