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
    HeartLessB
    FémininAge : 19Messages : 78

    le Ven 10 Juil 2015 - 4:21

    Je poste pour lire, je n'ai pas pas trouvé non plus.
    Je connais la technique de l'hover avec du CSS, mais uniquement sur un bloc, genre avec une image, alors pour une ligne de texte, j'avoue que... *sort les rames*
    avatar
    Marie
    FémininAge : 28Messages : 2206

    le Lun 6 Fév 2017 - 22:04

    Coucou!

    Merciiii! Alors j'ai rien lu en code mais le truc des padding et margin a régler mon soucis! J'arrivais pas à faire glisser correctement mon image... Il sautillait... J'ai remplacer margin par padding et ça fonctionne!!!

    MERCI! ^^

    Voici ce que ça donne:

    Passer la souris sur le petite cadre ou il y l'avatar. :)

    Contenu sponsorisé


      La date/heure actuelle est Mar 21 Nov 2017 - 22:23