AccueilDernières imagesRechercherS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


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

    Sparrow-style
    Sparrow-style
    FémininAge : 39Messages : 32055

    Mar 12 Nov 2013 - 9:49

    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)




    Un texte animé "glissé"


    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.

    Des XP à gagnerN'oubliez pas que chaque participation fournie dans cette mission vous rapporte 1 XP dans le domaine correspondant !


    Dernière édition par Sparrow-style le Mar 10 Déc 2013 - 10:34, édité 2 fois



    sign
    pizi
    pizi
    FémininAge : 36Messages : 584

    Mar 12 Nov 2013 - 11:17

    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 ^^'



    Mission#1 - Animation texte glissé [Initié] EYh8XMq
    Neva
    Neva
    FémininAge : 33Messages : 18565

    Mar 12 Nov 2013 - 11:38

    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



     
    pizi
    pizi
    FémininAge : 36Messages : 584

    Mar 12 Nov 2013 - 11:54

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

    tu peux faire un glissement via css ? oO



    Mission#1 - Animation texte glissé [Initié] EYh8XMq
    Sparrow-style
    Sparrow-style
    FémininAge : 39Messages : 32055

    Mar 12 Nov 2013 - 12:05

    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" Razz

    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.



    sign
    Scavenger
    Scavenger
    MasculinAge : 32Messages : 1501

    Mar 12 Nov 2013 - 16:09

    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



    Neva
    Neva
    FémininAge : 33Messages : 18565

    Mar 12 Nov 2013 - 16:29

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



     
    Scavenger
    Scavenger
    MasculinAge : 32Messages : 1501

    Mar 12 Nov 2013 - 16:34

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



    Onyx
    Onyx
    FémininAge : 31Messages : 3350

    Mer 13 Nov 2013 - 4:12

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



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


    Dernière édition par Onyx le Jeu 14 Nov 2013 - 0:44, édité 5 fois
    Sparrow-style
    Sparrow-style
    FémininAge : 39Messages : 32055

    Mer 13 Nov 2013 - 9:41

    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 Very Happy 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 ?




    sign
    Scavenger
    Scavenger
    MasculinAge : 32Messages : 1501

    Mer 13 Nov 2013 - 15:23

    Un truc dans le genre ?



    Sparrow-style
    Sparrow-style
    FémininAge : 39Messages : 32055

    Mer 13 Nov 2013 - 15:36

    Yep^^

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



    sign
    Fortuna
    Fortuna
    FémininAge : 32Messages : 4636

    Mer 13 Nov 2013 - 21:15

    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! :wall: )

    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 :wall: (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 ^^





    Eques
    Eques
    MasculinAge : 28Messages : 109

    Mer 13 Nov 2013 - 21:34

    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 Razz.
    Fortuna
    Fortuna
    FémininAge : 32Messages : 4636

    Mer 13 Nov 2013 - 22:04

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

    bon, du coup...





    Scavenger
    Scavenger
    MasculinAge : 32Messages : 1501

    Mer 13 Nov 2013 - 23:39

    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) )



    Hiro'
    Hiro'
    MasculinAge : 27Messages : 127

    Mer 13 Nov 2013 - 23:45

    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 Wink



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

    Bonne nuit !



    Pas souvent là, mais je vous aime quand même très fort ! Étudiant en prépa littéraire, quand j'en ai marre de pas comprendre ce que je lis, je code pour ne plus comprendre non plus ce que j'écris.
    Scavenger
    Scavenger
    MasculinAge : 32Messages : 1501

    Mer 13 Nov 2013 - 23:57

    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 Very Happy! 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^^



    Onyx
    Onyx
    FémininAge : 31Messages : 3350

    Jeu 14 Nov 2013 - 0:29

    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 Razz
    Sparrow-style
    Sparrow-style
    FémininAge : 39Messages : 32055

    Jeu 14 Nov 2013 - 10:18

    Ca avance tout ça, ça avance Very Happy

    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 ?



    sign
    Fortuna
    Fortuna
    FémininAge : 32Messages : 4636

    Jeu 14 Nov 2013 - 20:08

    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 ^^




    Hiro'
    Hiro'
    MasculinAge : 27Messages : 127

    Jeu 14 Nov 2013 - 20:21

    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 Very Happy! 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.



    Pas souvent là, mais je vous aime quand même très fort ! Étudiant en prépa littéraire, quand j'en ai marre de pas comprendre ce que je lis, je code pour ne plus comprendre non plus ce que j'écris.
    Scavenger
    Scavenger
    MasculinAge : 32Messages : 1501

    Jeu 14 Nov 2013 - 20:50

    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:

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

    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.



    Sparrow-style
    Sparrow-style
    FémininAge : 39Messages : 32055

    Ven 15 Nov 2013 - 8:28

    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 Razz)



    sign
    Fortuna
    Fortuna
    FémininAge : 32Messages : 4636

    Ven 15 Nov 2013 - 16:02

    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 ^^)




    Contenu sponsorisé


      La date/heure actuelle est Jeu 12 Déc 2024 - 8:53