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

    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
    Ehawee
    FémininAge : 24Messages : 4627

    le Jeu 5 Fév 2015 - 22:19

    Gihiiiiiiiiiii *w* Transitions poweeeeeeeeeeeer *-*

    Super initiative cette mission!

    Alors, j'avoue à la base, les transformations, ça me faisait vachement peur (j'ai commencé à les utiliser assez récemment!) pas les petits trucs simples comme ça, mais le système de cacher un bloc sous un autre, parce que ça fait aussi appel aux positions relatives et absolutes, tout ça. Mais au final à force de trainassouiller dans les codes, j'ai fini par comprendre le système U_U

    du coup pour le rendu...



    N'empêche je trouve ça chouette le CSS 3, au niveau des transformations, justement, ça a mis pas mal de mouvement dans les pages web xD



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


    avatar
    Onyx
    FémininAge : 23Messages : 3047

    le Sam 14 Fév 2015 - 8:22

    Bam!

    Genre comme ça?






    avatar
    Scavenger
    MasculinAge : 25Messages : 1501

    le Sam 14 Fév 2015 - 12:06

    Onyx: En fait, c'est pas exactement vrai, l'histoire de mettre les propriétés dans l'état par défaut de ta div / class / id. Vu qu'en fait, Toutes les propriétés, qu'elles soient définis ou non dans ton CSS ont une valeur initial par défaut. Donc utiliser transform uniquement dans le hover est suffisant. Techniquement c'est comme si on passait de la valeur initial quand l'état de la balise est par défaut, à un transform quand l'état de la balise passe en hover. Et vice versa. ^-^

    Sinon c'est cool ce que vous avez fait toutes les deux. =)
    Moi je suis entrain de réfléchir pour faire un encore plus compliqué pour arriver au même résultat. :hum:

    Edit: J'ai pas trouvé un truc super epic à faire, du coup j'ai fait ça ><

    alice-img




    Ah et petite note aussi, pour les feignants. Very Happy
    Les préfixe -webkit- -ms- -moz- ne sont plus utile pour transform (seulement les transformations en 2D) et transition depuis quelques versions des navigateurs. \o/
    Et petit lien utile: http://caniuse.com/#search=transform


    Dernière édition par Scavenger le Sam 14 Fév 2015 - 14:43, édité 1 fois



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

    le Sam 14 Fév 2015 - 14:19

    Tu as pas mis ton code Sca (en hide u_u) :siffle:
    Mais c'est exactement ce que je voulais obtenir x) Je plussoie pour les préfixes.

    Et si au lieu de le faire bouger à droite, tu le faisais descendre, ça donnerait quoi ?

    avatar
    Scavenger
    MasculinAge : 25Messages : 1501

    le Sam 14 Fév 2015 - 14:45

    Euh bha ça donnerait ça:

    alice-img





    avatar
    Onyx
    FémininAge : 23Messages : 3047

    le Mar 17 Fév 2015 - 1:49

    Ha, et moi qui perds mon temps à mettre les valeur initiale pour rien T_T

    Par contre, les transforms et les transitions ne fonctionnent toujours pas sans le préfixe webkit sur Safari, alors c'est pour ça que je continue à l'utiliser ^^



    avatar
    Scavenger
    MasculinAge : 25Messages : 1501

    le Mar 17 Fév 2015 - 2:06

    Ah oui, exact.. Safari.. ><
    Sont chiant ! xD



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

    le Mar 17 Fév 2015 - 10:34

    Han je l'avait oublié celui-là :hum: Va falloir que je revois mes conseils :siffle:

    avatar
    Alumine
    FémininAge : 20Messages : 488

    le Mer 18 Fév 2015 - 21:51

    Voilà un essai ! Je n'ai pas mis de transition pour le "retour", je trouvais ça marrant ^^





    Code:
    <style>#alice{border-radius:50%; width:148px;box-shadow: 1px 1px 10px #EEEEEE;}#alice:hover{transform:rotate(360deg);transition: all 1s ease;}</style>

    <div id="alice"><img src="http://nsa34.casimages.com/img/2015/02/05/150205062326709863.png" /></div>



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

    le Mer 18 Fév 2015 - 22:23

    J'aime bien l'idée du "sans retour". Ça change x)

    avatar
    Alumine
    FémininAge : 20Messages : 488

    le Jeu 19 Fév 2015 - 22:34

    J'ai trouvé ça un peu par hasard à vrai dire... Mais ça me donne des idées ! par exemple un avatar qui descende au hover, et qui au "onmouseout" enfin vous avez compris ^^' revienne par le haut... jvais faire un test !





    Ouf, réussi ^^' c'est un peu lent, mais bon...

    Code:
    <style>.blocalu{height:100px; width:100px; box-shadow:1px 1px 5px #AAAAAA; position:relative;overflow:hidden;}.dessous{width:100px;height:100px; position:absolute; background:white; transition: z-index 0s 0.5s; z-index:1;}.blocalu: hover .dessous{z-index:2;} .voletalu{z-index:2;height:100px;width:100px; margin-top:0;overflow:hidden; position:absolute; top:0; left:0; transition:z-index 0s 0.5s, top 0.5s 0.5s linear, margin-top 0.5s;} .blocalu:hover .voletalu{ z-index: 0; top: -100px; margin-top: 100px; }</style>

    <div class="blocalu"><div class="dessous"></div><div class="voletalu"><img src="http://nsa34.casimages.com/img/2015/02/05/150205062326709863.png" /></div></div>



    Alumine
    avatar
    Shaneliae
    FémininAge : 21Messages : 807

    le Jeu 4 Juin 2015 - 18:38

    J'ai toujours eu un peu de misère avec les animations mais maintenant je me débrouille au moins avec le hover et les différents transforms ! Mais bon, j'ai encore besoin de pas mal d'entraînement tout de même >.< Ton idée Alu' m'en a donné une autre ! On garde l'idée de l'avatar qui tourne, mais quand il tourne, il fait apparaître les infos qu'il cache ! Enfin, je vais tenter un petit truc sympa :hum:



    A-lice





    Bon, c'est un peu du bidouillage et j'ai fait l'animation dans l'autre sens xD J'aurais bien aimé aussi que quand le curseur s'enlève, l'image continue de tourner dans le même sens pour revenir à son point de départ, mais là c'est au-dessus de mes connaissances :hum:



    Présence réduite.
    avatar
    NeutralAsh
    FémininAge : 22Messages : 4

    le Jeu 11 Juin 2015 - 21:22

    @Shaneliae a écrit:
    J'ai toujours eu un peu de misère avec les animations mais maintenant je me débrouille au moins avec le hover et les différents transforms ! Mais bon, j'ai encore besoin de pas mal d'entraînement tout de même >.< Ton idée Alu' m'en a donné une autre ! On garde l'idée de l'avatar qui tourne, mais quand il tourne, il fait apparaître les infos qu'il cache ! Enfin, je vais tenter un petit truc sympa :hum:



    A-lice





    Bon, c'est un peu du bidouillage et j'ai fait l'animation dans l'autre sens xD J'aurais bien aimé aussi que quand le curseur s'enlève, l'image continue de tourner dans le même sens pour revenir à son point de départ, mais là c'est au-dessus de mes connaissances :hum:

    Une solution possible pour finir le tour d'après moi :)

    A-lice


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

    le Jeu 11 Juin 2015 - 21:56

    Sauf que dans ton message, l'image ne tourne pas :hum:

    avatar
    NeutralAsh
    FémininAge : 22Messages : 4

    le Jeu 11 Juin 2015 - 22:30

    Hum, c'est bizzare, je viens de tester sur FF, Opera, Chromium, Microsoft Edge et IE8, et a part sur IE8 tous marchait bien, tu à quel navigateur ??
    avatar
    A-Lice
    FémininAge : 23Messages : 4939

    le Ven 12 Juin 2015 - 10:49

    Chrome, mais là au boulot ça fonctionne. Sur Chromium (de linux) donc chez moi, ça ne fonctionnait pas :hum:

    avatar
    Shaneliae
    FémininAge : 21Messages : 807

    le Ven 12 Juin 2015 - 11:33

    J'aime beaucoup ta solution Ash ! Je vais étudier ça d'un peu plus près Wink

    Sinon je sais aussi qu'il vaut mieux ajouter des préfixes -webkit- dans les transforms tout simplement pour les versions mobiles (tournant sous Android, les autres je ne sais plus trop...). J'ai testé sur ma tablette et mon mobile tournant sous Android, et seuls ceux qui ont bien pensé à mettre le préfixe fonctionnent !

    Sinon, du coup j'aimerais rappeler un petit tuto de Manumanu que je trouve bien fait sur ces petits préfixes ici et le super site de Can I Use qu'elle nous donne et que j'utilise très souvent maintenant. En clair si c'est en vert, c'est que la méthode choisit fonctionne, si il y a un petit - jaune c'est qu'il faut un préfixe et si c'est rouge, alors ça ne fonctionne pas sous ce navigateur.
    Donc en clair, le webkit est encore utile pour au moins 3 navigateurs, mais c'est le seul encore nécessaire :hum: Par contre il est vrai que si on a de vieilles versions de navigateurs, là ça peut poser problème (comme sous IE8 qui ne prend en charge pas grand chose...)
    Pour les transitions c'est pareil, il faut encore le préfixe webkit uniquement pour les navigateurs Android (celui fournit de base, pas les chromes ou autres)

    Par contre, il est dommage que ce site ne donne pas pour Chromium mais uniquement les navigateurs les plus courants :hum:



    Présence réduite.
    avatar
    Chione
    MasculinAge : 16Messages : 397

    le Ven 26 Juin 2015 - 18:39

    Moi, j'essaye!



    pas mal hein Cool



    Dernière édition par Chione le Sam 27 Juin 2015 - 0:28, édité 2 fois




    FEZ!FEZ!
    avatar
    Alumine
    FémininAge : 20Messages : 488

    le Ven 26 Juin 2015 - 20:45

    Wow, sympa ta transition ! Tu nous mettrais ton code, en hide ? Wink



    Alumine
    avatar
    Chione
    MasculinAge : 16Messages : 397

    le Sam 27 Juin 2015 - 0:28

    Voilà!




    FEZ!FEZ!
    avatar
    A-Lice
    FémininAge : 23Messages : 4939

    le Dim 28 Juin 2015 - 15:58

    J'avoue que c'est pas mal du tout ! Et ça augmente la complexité de la mission de message en message tout ça :star:

    avatar
    Dacota.
    FémininAge : 23Messages : 39

    le Dim 26 Juil 2015 - 22:33

    Sympas ces animations, y aurait-il un tutoriel avec des transitions de la sorte ? :)
    avatar
    Ayfoth
    MasculinAge : 27Messages : 1229

    le Ven 11 Sep 2015 - 2:33

    Je peu rien poster y a deja trop d'animations :p



    avatar
    Henrykiki
    MasculinAge : 25Messages : 576

    le Mer 16 Sep 2015 - 14:55

    Et bien et bien, que de belles animations de ce coté-ci ! Plutôt pas mal, un petit coup de coeur pour l'animation de Chione, et puis l'idée du Yoyo de Sca' est plutôt cool aussi ! Bravo les gens.



    Des bisous !
    Contenu sponsorisé


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