Mission#1 - Animation texte glissé [Initié]

Rappel du premier message :

Bonjour, bonsoir !

Je vous propose une première mission pour tout les apprentis Architectes, vous évitant ainsi le cruel questionnement du "dois-je ouvrir un topic en premier ?" x)






Si vous avez du mal à voir de quoi il s'agit c'est très simple : nous avons un texte de type "titre" comme ceci :

Ooops ! Ca glisse par ici !

Le texte est collé au bord, mais au survol de la souris, ce texte doit progressivement glisser vers le milieu de la page pour se décoller du bord, d'une centaine de pixels environ. Cela donnera au survol :

Ooops ! Ca glisse par ici !

Comment réaliser cet effet de transition ? Quels problèmes se posent ? Quelles connaissances sont nécessaires ?
N'hésitez pas à participer à cette mission, vous n'êtes pas forcé de poster le résultat, vous pouvez simplement intervenir pour apporter le principe théorique de la réalisation de cet effet afin que tout le monde en discute !

Attention : si vous souhaitez poster le résultat vous devrez lier un autre forum (forum test par exemple) car un effet en hover nécessite une feuille de CSS externe. Sinon, réalisez une iframe dans le message, pour ceux qui connaissent.

Bonjour.

Sparrow-style a écrit:

Code:

<style>.swizz{display: inline; font-weight: bold; padding-left: 0px; transition: 1s; -moz-transition: 1s; -o-transition: 1s; -webkit-transition: 1s;}.swizz:hover{padding-left: 100px; transition: 1s; -moz-transition: 1s; -o-transition: 1s; -webkit-transition: 1s;}</style>
<span class="swizz">Ooops, ça glisse !</span>

Je ne comprend pas dans ce code pourquoi on met deux fois "transition: 1s", une fois dans .swizz et une fois dans .swizz-hover. Si j'ai bien compris, le premier swizz c'est le texte normal et le swizz-hover c'est le texte survolé, mais on ne le survole qu'une fois, donc pourquoi mettre deux fois une durée de transition ?

Il suffit de faire le test x)

La transition affichée une fois :


Ooops, ça glisse !

La transition affichée deux fois :


Ooops, ça glisse !

En fait il faut pas penser en "on survole qu'une fois" mais en "on passe d'un état à un autre". Vu qu'on passe de l'état "non-survolé" à l'état survolé c'est la transition du "hover" qui est prise en compte, mais il faut bien ensuite revenir à l'état "non-survolé", et là c'est la transition qu'il y a dans le swizz simple qui compte. Il faut se dire que le navigateur passe de l'un à l'autre, il faut donc que l'information soit dans les deux.

De la même façon, si tu mets une information dans l'un et pas dans l'autre, il ne peut pas y avoir de transition. Par exemple, en mettant le "padding-left" juste dans le "hover", ça ne fonctionnerait pas, pour qu'il y ait transition il faut qu'il y ait le passage entre deux états définis, donc avec une propriété qui a deux valeurs différentes, une pour chaque état.

Je sais pas si j'ai été clair donc n'hésite pas à poser d'autres questions ^^

Alors,
Ce n'est pas entièrement juste, ce que tu as dit Sparrow, et je m'en vais m'expliquer:

La propriété "hover" est une pseudo-classe concernant les propriétés CSS. Ce faisant, elle garde tout les attribut du CSS "classique" jusqu’à modification de l'un de ceux-ci.

Si tu défini ta transition dans ton bloc de défaut (donc sans :hover ou autre), et bien la transition sera aussi appliqué à ":hover".

Voici ce que vous ne voyez pas quand le navigateur interprète votre code CSS:

Ceci est un code CSS qui permet la transition du padding-left:

Code:

.swizz{
display: inline;
font-weight: bold;
padding-left: 0px;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-webkit-transition: 1s;
}
.swizz:hover{
padding-left: 100px;
}

Et voici ce que le navigateur interprète:

Code:

.swizz{
display: inline;
font-weight: bold;
padding-left: 0px;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-webkit-transition: 1s;
}
.swizz:hover{
display: inline;
font-weight: bold;
padding-left: 100px;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-webkit-transition: 1s;
}

Toute les propriétés de "départ" de la class swizz sont ré-incluses dans sa forme au survol, sauf celles modifiées.

Mon texte qui bouge sans avoir redéfinis "transition" dans mon :hover

Oui exact, j'avais pas expliqué jusque là, merci du complément^^ Disons que je vois souvent des gens mettre une propriété en hover alors qu'elle n'est pas présente dans le "normal" et être surpris que la transition ne s'opère pas progressivement.

Merci Sparrow, je n'avais pas pensé au "retour" en fait, c'est vrai.

Pour le reste, j'ai compris normalement.

Super intéressants ces exercices! J'arrive trop tard pour participer?

C'est jamais trop tard !

Bien, voilà le mien alors:
Voilà le code

Et le résultat !

J'ai bon capitaine ? =D
Je propose un peu plus dur maintenant, faire tourner le texte tout en le déplaçant ?

Bah ça fonctionne donc c'est bon ^^

Quant à faire tourner le texte ça risque de poser un problème, le même en fait que lorsqu'on met un "margin" au lieu d'un "padding"... Tu vois ce que je veux dire ?

Bouh!

Len: Faire une rotation, c'est un fail assez épic merci XD
Dis, tant qu'à vouloir faire avancer les choses, je te pose une colle

Pourquoi avoir mis une transition dans ton ".texte" ainsi que dans ton ".texte:hover"? Tout ce que tu mets dans ton ".texte" se retrouve automatiquement dans ton ".texte:hover", alors ça ne fait qu'alourdir ton code pour rien. Pourtant, il y a des cas où c'est utile, tu sais pourquoi?

Je comprend ta question, excuse-moi d'avance si les explications ne sont pas claires, mais je vais essayer de te répondre.
Le navigateur, si j'ai bien compris passe d'un état à un autre. Donc pour que la transition se fasse dans les deux sens, il faut mettre la transition dans les deux div !
Bon et puis c'est aussi parce que j'ai tâtonné et que j'ai vu que ça marchais pas sans...

Bouh!

Mmhh... Pas vraiment.

Si tu vas voir à la page précédente, il y a Scavenger qui explique que tu peux mettre ta transition uniquement dans ta "class sans hover" et qu'elle s'appliquera aussi à la "class avec hover", à condition que tu fasses attention de mettre la propriété que tu veux modifier dans ta "class sans hover".
Du coup, dans ton code, mettre une transition dans ta "class avec hover" n'a aucune utilité et ne fait que prendre de la place pour rien. Du coup, mieux vaut l'enlever, cela te libère de l'espace dans ton CSS.

Là où c'est utile (et c'était ma question, désolée si c'était pas clair), c'est quand tu souhaites que la transition se fasse différemment à l'aller et au retour.
Par exemple, je veux que mon mouvement se fasse lentement à l'aller, mais qu'il retourne rapidement à son point de départ au retour.
Dans cette situation, la transition dans la "class sans hover" correspond au retour et la transition dans la "class avec hover" serait l'aller.

Du coup, j'écrirais cela:

Code:

<style> .texte {
transition: 0.5s;
-moz-transition: 0.5s;
-htm-transition: 0.5s;
-o-transition: 0.5s;
-webkit-transition: 0.5s;
padding-left : 0px;
}
 .texte:hover {
padding-left : 80px;
transition:1s;
-moz-transition:1s;
-htm-transition:1s;
-o-transition:1s;
-webkit-transition:1s;
}</style>
<span class="texte"><b>Oooops, je glisse</b></span>

Et cela donnerait ceci:
Oooops, je glisse

"Dans cette situation, la transition dans la "class sans hover" correspond au retour et la transition dans la "class avec hover" serait l'aller. "

Oui, c'est ce que je voulais dire, mais tu l'explique mieux, j'ai compris maintenant ^^
Du coup j'ai une autre question qui me vient, en rapport avec les positions.
Imaginons qu'on veut changer la longueur d'une div au survol. Sauf qu'on veut que la div s'adapte au contenu. Or pour cela il faut ne pas définir de longueur... Mais dans ce cas, le hover prendra la longueur de la div d'origine... Dans ce cas est-ce qu'on peut contourner le problème d'une autre façon ?

Je sais pas si j'ai vraiment compris ta question ou pas, mais en fait si tu modifies une longueur t'es obligé de la définir, et donc tu peux pas faire de longueur adaptable, elle doit être fixe^^ Le mieux à faire est alors de mettre un overflow pour que le texte soit toujours visible, mais c'est pas esthétique, surtout avec un changement en hover.

Rebouh!

Une autre possibilité est de jouer avec le min-height et le max-height.
Dans ton cas, tu pourrais mettre un petit min-height et un grand max-height dans ta class sans hover.
Ensuite, tu mets un max-height et un min-height de la hauteur que tu le souhaites dans ta class avec hover.

Exemple:

Code:

.blabla {
background: #dfdfdf;
width: 100px;
transition: linear 1s;
min-height: 100px;
max-height: 500px;
}
.blabla:hover {
min-height: 200px;
max-height: 200px;
}

Cela te donnera ceci! Cela marche bien pour agrandir une div. Par contre, pour rapetisser... Faut utiliser l'overflow et c'est laid.

Sparrow: on est bien d'accord, l'overflow est horrible en hover
Onyx : En fait le résultat souhaité serait plutôt l'inverse (valeur définie en nonhover et valeur indéfinie en hover) mais à ce que j'ai compris c'est impossible?

Eh bien... oui c'est possible?
C'est la même chose, mais à l'envers:

Code:

<style>.bouh {
background: #dfdfdf;
width: 200px;
max-height: 100px;
overflow: hidden;
padding: 5px;
transition: 1s;
-moz-transition: 1s;
-webkit-transition: 1s;
-htm-transition: 1s;
-o-transition: 1s;
}
.bouh:hover {
max-height: 500px;
transition: 2s;
-moz-transition: 2s;
-webkit-transition: 2s;
-htm-transition: 2s;
-o-transition: 2s;
}</style>
<center><div class="bouh">Texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte.</div></center>

Et cela donnerait quelque chose comme ceci. Texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte.

Ouah, merci ça me servira, je savais pas qu'on pouvait faire ça ^^

Aaaah okay, j'avais pas compris que ça t'était égal qu'on ne voit pas tout le contenu dans la version "petite" de ta div, autant pour moi ^^ Dans ce cas oui c'est possible, mais si t'avais voulu qu'on voit tout un overflow avec scroll aurait été nécessaire à un moment ou à un autre et c'est pas très joli effectivement^^

Oui, j'ai eu de la misère à comprendre aussi avant d'aller lire ta demande d'aide pour ton code.
Tu devrais aller mettre le crochet vert de "résolu" pour que les modérateurs puisse voir que tout est bon d'ailleurs ^^

Je pense que cette mission est achevée, accomplie avec succès d'ailleurs je vous félicite tous !

j'ai beau essayer j'arrive pas TT ( bon certes j'code comme un caca u_u)

Tu as lu l'ensemble du topic ? Car beaucoup de solutions et d'indications y sont données ^^

J'me permets juste : on a tous mis nos essais en hide cap'taine x) Donc je pense qu'il était obligé de poster pour voir les solutions ^^ (maintenant que la mission est finie, on pourrait peut-être les faire sauter, d'ailleurs)

thank's