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 #7 - Animation, image qui tourne [Initié]

    Partagez
    avatar
    A-Lice
    FémininAge : 23Messages : 4939

    le Jeu 5 Fév 2015 - 18:33

    Rappel du premier message :

    Mission #7 - Animation, image qui tourne [Initié]



    Bonjour bande de moussaillon !

    Je viens vous proposer pour cette septième mission de tourner de l'œil /pan. En fait, j'aimerais (plutôt que de vous voir vous tourner de l'œil) voir une image tourner.

    Pour vous aider, nous avons une image comme ceci :

    mission07

    L'image est droite, cependant au survol de la souris, cette dernière fera un tour des aiguilles d'une montre (complet ou non). On arrivera à quelque chose comme ça au survol :

    mission07bis


    Comment peut-on réaliser cet effet de transition ? Quels problèmes peuvent se posent ? Quelles connaissances doit-on avoir ?
    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 !

    Pour laisser une chance à tout le monde de participer, pensez à mettre votre code sous
    Code:
    [hide][/hide]


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

    avatar
    xLittleRainbow
    FémininAge : 22Messages : 23

    le Mar 3 Nov 2015 - 16:47

    Bon ben c'est nettement moins chouette que ce que j'ai pu voir dans le topic mais bon... Je suis surtout en quête de conseils et je pense que le meilleur moyen de s'améliorer est encore de faire des tests, même peu concluants ^^



    Petit texte




    Je ne comprends pas de quelle manière on peut avoir un retour homogène u.u Et mon bidule bug dès que la souris n'est plus sur l'image. Bref, beaucoup de défauts dans ce mini bout de truc ^^'
    avatar
    Lokiaryu
    FémininAge : 21Messages : 105

    le Mar 10 Nov 2015 - 21:55

    Bonjour ! J'essaie, moi aussi ! Very Happy






    Hourra ! Après quelques essais plus ou moins fructueux, mission accomplie cheers
    avatar
    Nihil Scar Winspeare
    Messages : 4799

    le Jeu 12 Nov 2015 - 1:44

    xLittleRainbow > Tu as totalement raison, il faut poster, s'entrainer, etc au maximum :)
    Faut pas avoir peur de pas totalement réussir, on a tous commencé :p

    @xLittleRainbow a écrit:Je ne comprends pas de quelle manière on peut avoir un retour homogène u.u
    Tu as défini ta transition dans le CSS au survol (^-^). Il faut mettre la transition sur l'élément (pas sur le :hover) et ça sera bon ♥
    Sinon tu lui dit "Met la transition quand je survole". Donc quand il ne survole pas → Pas de transition → Pas de retour fluide.

    @xLittleRainbow a écrit:Et mon bidule bug dès que la souris n'est plus sur l'image.
    Ici, la réponse de ton problème se trouve... Dans ta question :toto:
    Dans ton CSS, tu as défini que le déplacement se fait quand on survole l'image. Donc quand l'image a beaucoup bougé vers la droite on ne la survole plus. Donc l'effet au survol s'annule :p

    Petite note, attention aux retours à la ligne dans le style quand on est dans un message. Ils vont créer des balises br qui font bugger le CSS. Par exemple ici, juste après "box-shadow" :
    Code:
    .bg_white:hover{box-shadow<br />:0 0 4px rgb(0,0,0);}

    Bravo Lokiaryu :)
    J'ai vu que tu as mis beaucoup de préfixes navigateurs, si tu veux je t'invite à lire ce tuto → Savoir quand utiliser des préfixes CSS
    Tu verras quand maintenant plusieurs préfixes sont obsolètes, cela allègera ton code de les enlever (^-^)

    avatar
    Lokiaryu
    FémininAge : 21Messages : 105

    le Jeu 12 Nov 2015 - 2:24

    Oh, merci beaucoup pour le lien ! ♥
    Je pensais tout bêtement qu'il fallait toujours en mettre le plus possible, ehehe Embarassed ça allège effectivement grandement le tout ! ^-^
    avatar
    xLittleRainbow
    FémininAge : 22Messages : 23

    le Jeu 12 Nov 2015 - 11:29

    J'avais jamais réussi à comprendre ce que ça pouvait bien changer de mettre la transition dans la balise ou dans le hover. Tu viens d'éclairer ma lanterne pour une question de longue date donc merci o/
    Faudra que je ressente ça pour voir si ça fonctionne mieux ^.^
    Contenu sponsorisé


      La date/heure actuelle est Mer 22 Nov 2017 - 15:58