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

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.

J'aurai dit d'emblée par l'utilisation de la balise < marquee > en ajoutant un stop avec une taille de margin spécifique mais je sens que ce n'est pas aussi simple ^^'

Faites gaffe à pas écrire le nom des balises comme < marquee > sans les espaces que je viens de mettre ou sans la balise [ code ] . Ton message faisait défiler tout le forum, pizi x)

Je pense que Sparrow veut plutôt d'une animation CSS que du marquee puisque c'est plus un glissement qu'un défilement, qu'il y a l'idée de survol et d'arrêt. Cela dit, au lieu de glissement je parlerais d'un décalage avec transition :p

Ah désolée Neva je ferai plus attention ^^'

tu peux faire un glissement via css ? oO

En effet, c'est avec css qu'il vaut mieux le faire, en plus il est déconseillé d'utiliser la balise "marquee", c'est ce qui se dit beaucoup sur le net en tout cas. Va pour le "décalage avec transition"

Edit : oui c'est possible bien sûr, le texte sera à un endroit et au passage de la souris il se décalera un peu vers le centre de la page, pour s'arrêter ensuite.

Eh bien,
Je propose d'utiliser l'attribut CSS3: transition dans une définition du CSS pour que la balise visée se déplace:
Je hide ce que je fais, histoire de laisser chercher un peu quand même :p


Ici j'ai modifier uniquement le padding-left, histoire de ne pas avoir cette effet "d'arrêt de l'animation" quand le text passe à droite du curseur^^

PS: Jack, c'est une super idée ces exo de guilde ! Je crois que je vais en créer quelques uns :3

Ah tient, ça marche pas avec Safari cette propriété ? Ca ressort bien sur CHrome mais Safari ne me met pas la transition

Peut être faut-il que je mette les préfixes ?

Bouh!
J'ai mis en "hide" pour ne pas spoiler le fun des autres



Édit: On peut changer le "div"en "span", mais je préfère que ce soit toute la lignequi bouge  personellement...

Joli^^ On expliquera en détail les méthodes par contre histoire que ceux qui ne savaient absolument pas comment faire puissent apprendre^^

Scav' : ravi que ce principe te plaise ! J'ai pas mal d'idée d'exo, parfois farfelus d'ailleurs, juste histoire de s'amuser, pratiquer, et au final comme c'est la meilleure façon d'apprendre bah je pense que ça peut être sympa^^

Donc pour ceux qui ne sauraient pas du tout comment s'y prendre :
Comment afficher un texte et changer sa mise en forme au survol ? (même principe qu'avec un lien, si ça peut vous aider)

Pour ceux qui ont trouvé une méthode :
Votre texte glisse au survol, cool mais il glisse aussi lorsqu'on survole l'autre bout de la ligne, pas seulement le texte... Pourrions-nous changer ça et faire en sorte que seul le survol du texte lui même fasse le décalage ?

Un truc dans le genre ?

Yep^^

D'autres personnes ? Même si vous avez besoin de beaucoup d'explications n'hésitez pas à participer, c'est fait pour ça !

Bon... J'avoue que ton exo me pose une purée de colle x) C'est un truc que je maîtrise pas du tout du tout les effets au survol, du coup, j'ai un peu tâtonné ^^ (un peu beaucoup ^^, bon, okay, je tâtonne encore!  )

Bon, j'ai supposé qu'il fallait bosser au CSS avec une histoire de hover (rappelons que je ne sais pas me servir des hovers à part pour virer le soulignement dans un thème via la feuille de CSS), donc j'ai testé ça.



Voila  (oui, il est aisé de deviner que j'ai pas trouvé et que ça me frustre ^^) Et désolée pour ceux et celles dont j'ai traumatisé les mirettes avec du code ... sans doute bourré de fautes ^^"*

EDIT: J'ai n'yeuté les codes des gens pour qui ça marche, du coup, j'ai des questions ^^ (j'ai tout collé en hide ^^

Je crois avoir le bon effet! J'ai tout mis en Hide :)




PS: Narja, pour le fluide, tu as seulement oublié de mettre les : après ta transition .

houps xD ça explique beaucoup de choses en effet (je plaide coupable)

bon, du coup...

Alors, Narja, que je t'explique (viens au coin du feu ! :3).

Ici, j'ai utilisé une ID pour définir ma balise "p". Une ID est quelque chose d'unique sur une page HTML, une seule balise a le droit à un ID particulier.
Pour définir le CSS d'un bloc avec une ID (ici c'est p avec l'ID "cabougetoutseul") et bien il faut utiliser `#"nomdel'ID" {}`.

Après, concernant "transition", ce que tu utilise en définissant "transition" c'est le méta-attribut qui rassemble toutes les fonctions de transition (lien vers un bon tuto sur les transitions)

Quand tu utilise "transition: all 1s;", en faite, c'est comme si tu utilisais "transition-duration: 1s;" et "transition-property: all;".

La propriété "transition" gère (comme son nom l'indique) une transition d'un état vers un autre. Et donc, quand tu définis la transition dans une div/class/ID, et bien tu lui dis tout simplement que quand "transition-property" change, et bien tu met "transition-duration" secondes.

Ici, j'ai mis "transition-property:padding-left;" pour dire à ma transition, que si "padding-left" change, tu la fera changer pendant "transition-duration:1s".


(Enfin, c'est du très résumé, mais je pense que tu devrais comprendre x) )

Ah... Les transitions.
Si j'ai bien compris, montrer qu'on est trop fort rapporte un points. C'est parti ! Et puis ça pourra toujours servir aux petits codeurs en herbe (a). Postez pour lire



Vous vous coucherez donc moins bête ce soir, et c'était pas gagné !

Bonne nuit !

Maintenant, moi j'ai une question pour toi mon cher Hiro. :)

Pourquoi utilise-tu une "class" ? :)


PS: j'me sens pas moins bète moi ! Et on a pas eu un exemple de ton code dans ton message. :p

PS2: si on spécifie les propriétés sur transition, au lieu de mettre "all", c'est surtout pour que quand on change (dans beaucoup de ligne de code généralement) une propriété et que l'on ne veut pas que celle ci change, et bien il faut aller rechercher où tu avais définis ta transition et la redéfinir. C'est un peu comme les préfixes (-o- -ms- -moz- -webkit-) qui ne sont pas toujours obligatoires^^

Bouh!

J'imagine que Hiro est comme moi, il utilise une class par habitude. Le "id" étant lié à une seule balise, je l'utilise personnellement moins que le "class" parce que j'ai tendance à réutiliser la même balise à plusieurs reprises dans ma page. C'est vrai que dans ce cas-ci, prendre l'id est plus logique

Ca avance tout ça, ça avance

Bravo à tout ceux qui tentent, posent des questions et veulent comprendre, y'a pas de question bête !

D'ailleurs, j'en ai une que je vais laisser globale, donc adressée à tout le monde :

Pour décaler le texte, est-il préférable d'utiliser "margin" (appliquer une marge extérieure) ou "padding" (appliquer une marge intérieure) ?

Je sais que Scav' le sait, donc les autres, à votre avis que peut-on appliquer, et y'a-t-il un avantage à l'un des deux ?

Hellow ^^

Oh, une soirée feu de camp *-* Merci papi Sca! (pourquoi Papi? Bah, et pourquoi pas?) Plus sérieusement, merci pour les explications et pour le site internet, je suis en train de le bouquiner, c'est très clair ^^, et du coup, d'un coup, tout s'éclaire ^^

Merci aussi Hiro ^^

En ce qui me concerne, j'me coucherai vraiment moins bête ce soir =)

Bawi ,Bawi, ça avance cap'taine =) Pour ce qui est de ta question, je dirai... hm, plutôt le padding? C'est une sorte d'intuition, hein? donc ça vaut ce que ça vaut, mais.. imagine, on est dans le cadre d'un codage complexe, et on a besoin du margin pour centrer le bloc de titre, par exemple, eh bien... plutôt que d'aller bidouiller là dedans, autant utiliser le padding... Et puis il me semble que le margin ne fonctionne pas sur les < span > et les < p >, non? Alors que le padding passe sur tout, il me semble donc moins casse gueule de taper sur le padding ^^

Scavenger a écrit:Maintenant, moi j'ai une question pour toi mon cher Hiro. :)

Pourquoi utilise-tu une "class" ? :)


PS: j'me sens pas moins bète moi ! Et on a pas eu un exemple de ton code dans ton message. :p

PS2: si on spécifie les propriétés sur transition, au lieu de mettre "all", c'est surtout pour que quand on change (dans beaucoup de ligne de code généralement) une propriété et que l'on ne veut pas que celle ci change, et bien il faut aller rechercher où tu avais définis ta transition et la redéfinir. C'est un peu comme les préfixes (-o- -ms- -moz- -webkit-) qui ne sont pas toujours obligatoires^^

Mon chez Scarvenger. Si tu penses que tu... Hm. Pardon.

Comme dit par un coupaing un peu plus haut, j'utilise une class pour pouvoir réutiliser quand je veux le code. Et puis, ça vient plus vite dans les mains, ça évite de devoir chercher le #, toussa. Bref, j'ai aucun argument, mais je ne vois pas l'intérêt d'utiliser les id, CQFD.
Je n'ai pas mis d'exemple... Mais je crois que tout le monde a compris où était le but, non ? :s

Merci pour ton éclairant PS2, par contre.

Quant à ta question, Sparrow, je suis embêté. Mais je dirais un padding, mais sans pouvoir me justifier. Hâte de voir les réponses des vrais pros ^_^.

Géniale, cette idée des guildes en tous cas.

En fait, concernant l'utilisation de padding ou margin, c'est facile, il suffit juste de savoir à quoi sert les deux.

Je vais vous expliquer ça dans une image, je pense que ce sera plus clair:



ici, "margin-top" et "padding-top" représente les propriétés CSS de la "div".


Dans mon code (celui du texte qui glisse), j'ai définis le padding de la balise "p" qui a pour contenu "Ooops ! Ca glisse par ici !". Ce qui fait que votre curseur est toujours en "hover" (en survol) de ma balise quand le contenu de celle ci part plus loin ! Si j'avais utilisé un margin, et bien c'est la balise "p" qui se serait déplacé, et donc, à un moment, mon curseur n'aurait plus été en "hover" (survol) de ma balise, ce qui fait revenir l'état de ma balise à son état de départ (toujours avec une transition, mais l'inverse cette fois), puis mon curseur se re-retrouve en hover de ma balise, etc, etc, jusqu’à que j'éloigne mon curseur.

Héhéhé belle explication ^^
Vos intuitions étaient bonnes mais c'est mieux de savoir pourquoi, quand même, donc oui, de mon point de vue également c'est ça : avec un padding on agrandit la zone, avec un margin on la décale. Dans le premier cas si on survole le texte au début de celui-ci ça buge (ça s'arrête et ça s'est plus quoi faire, car notre zone se déplace et si on la suit pas avec la souris bah on sort de la zone donc elle veut revenir là où elle était, mais en revenant on est à nouveau dessus donc elle repart, etc...).

J'illustre juste les explications de Scav' :

Déplacement avec un margin :


Ooops, ça glisse !


Ooops, ça glisse !

Le premier glisse normalement, le second saccade dans l'animation et se bloque dès que la souris sort de la zone, puis le margin déplace la zone, alors que le padding l'agrandit.

Au passage :
Un "span" ne prend naturellement pas les margin, car il est de type "inline" (ligne), mais on peut changer cela en mettant un "display : X".
- display : inline => ligne
- display : block => block (comme un "div")
- display: inline-block => un peu les deux XD donc prend des propriétés des deux en fait : ça reste de type "ligne" mais en acceptant les marges
- display: none => fait disparaitre l'élément

(J'ai peut-etre oublié des choses ou mal dit certains, Scav' corrigera au besoin )

Mais y'a plein de trucs que je connaissais pas en "display" Oo" je garde ça dans un coin pour tester je pense ^^ (j'avoue, j'utilisais peu les display, mais c'est intéressant, en fait, rudement pratique aussi quand on y réfléchit bien) Merci Sca' et Cap'taine pour l'explication ^^ très clair (du coup, c'est pourri, je peux pas vous assassiner de questions ^^)