AccueilFAQRechercherMembresGroupesS'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é]

    Partagez
    avatar
    Okhmhaka
    FémininAge : 32Messages : 31851

    le Mar 12 Nov 2013 - 9:49

    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)




    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



    avatar
    Vengryn
    MasculinAge : 26Messages : 130

    le Lun 18 Nov 2013 - 13:53

    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 ?
    avatar
    Okhmhaka
    FémininAge : 32Messages : 31851

    le Lun 18 Nov 2013 - 15:12

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



    avatar
    Scavenger
    MasculinAge : 25Messages : 1501

    le Lun 18 Nov 2013 - 15:28

    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




    avatar
    Okhmhaka
    FémininAge : 32Messages : 31851

    le Lun 18 Nov 2013 - 16:26

    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.



    avatar
    Vengryn
    MasculinAge : 26Messages : 130

    le Lun 18 Nov 2013 - 17:39

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

    Pour le reste, j'ai compris normalement.
    avatar
    Whitemoon
    FémininAge : 17Messages : 695

    le Ven 22 Nov 2013 - 21:58

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



    avatar
    Scavenger
    MasculinAge : 25Messages : 1501

    le Ven 22 Nov 2013 - 22:08

    C'est jamais trop tard !



    avatar
    Whitemoon
    FémininAge : 17Messages : 695

    le Ven 22 Nov 2013 - 22:13

    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 ?
    avatar
    Okhmhaka
    FémininAge : 32Messages : 31851

    le Dim 24 Nov 2013 - 13:40

    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 ?



    avatar
    Onyx
    FémininAge : 23Messages : 3047

    le Dim 24 Nov 2013 - 21:06

    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 Wink

    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?



    avatar
    Whitemoon
    FémininAge : 17Messages : 695

    le Ven 29 Nov 2013 - 20:51

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



    avatar
    Onyx
    FémininAge : 23Messages : 3047

    le Ven 29 Nov 2013 - 21:21

    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
    avatar
    Whitemoon
    FémininAge : 17Messages : 695

    le Ven 29 Nov 2013 - 21:53

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



    avatar
    Okhmhaka
    FémininAge : 32Messages : 31851

    le Ven 29 Nov 2013 - 22:48

    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.



    avatar
    Onyx
    FémininAge : 23Messages : 3047

    le Sam 30 Nov 2013 - 2:00

    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.
    avatar
    Whitemoon
    FémininAge : 17Messages : 695

    le Sam 30 Nov 2013 - 11:03

    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?



    avatar
    Onyx
    FémininAge : 23Messages : 3047

    le Dim 1 Déc 2013 - 6:58

    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.
    avatar
    Whitemoon
    FémininAge : 17Messages : 695

    le Dim 1 Déc 2013 - 11:53

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



    avatar
    Okhmhaka
    FémininAge : 32Messages : 31851

    le Dim 1 Déc 2013 - 19:12

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



    avatar
    Onyx
    FémininAge : 23Messages : 3047

    le Dim 1 Déc 2013 - 19:22

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



    avatar
    Okhmhaka
    FémininAge : 32Messages : 31851

    le Mar 10 Déc 2013 - 10:34

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



    avatar
    shibari
    MasculinAge : 22Messages : 277

    le Dim 12 Jan 2014 - 22:01

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





    Merci Dakota pour ce kit.
    avatar
    Okhmhaka
    FémininAge : 32Messages : 31851

    le Lun 13 Jan 2014 - 7:54

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



    avatar
    Ehawee
    FémininAge : 24Messages : 4627

    le Lun 13 Jan 2014 - 14:29

    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)



    Absence jusque début juillet pour cause de concours ; merci de vous adresser à d'autres membres du staff Wink


    avatar
    sica3
    MasculinAge : 44Messages : 135

    le Mer 3 Déc 2014 - 4:05

    thank's
    Contenu sponsorisé


      La date/heure actuelle est Dim 19 Nov 2017 - 7:55