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

    A-Lice
    A-Lice
    FémininAge : 30Messages : 4939

    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 !

    Fortuna
    Fortuna
    FémininAge : 32Messages : 4636

    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




    Onyx
    Onyx
    FémininAge : 31Messages : 3350

    Sam 14 Fév 2015 - 8:22

    Bam!

    Genre comme ça?






    Scavenger
    Scavenger
    MasculinAge : 32Messages : 1501

    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



    A-Lice
    A-Lice
    FémininAge : 30Messages : 4939

    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 ?

    Scavenger
    Scavenger
    MasculinAge : 32Messages : 1501

    Sam 14 Fév 2015 - 14:45

    Euh bha ça donnerait ça:

    alice-img





    Onyx
    Onyx
    FémininAge : 31Messages : 3350

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



    Scavenger
    Scavenger
    MasculinAge : 32Messages : 1501

    Mar 17 Fév 2015 - 2:06

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



    A-Lice
    A-Lice
    FémininAge : 30Messages : 4939

    Mar 17 Fév 2015 - 10:34

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

    Alumine
    Alumine
    FémininAge : 27Messages : 487

    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
    A-Lice
    A-Lice
    FémininAge : 30Messages : 4939

    Mer 18 Fév 2015 - 22:23

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

    Alumine
    Alumine
    FémininAge : 27Messages : 487

    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
    Anonymous
    Invité

    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:
    NeutralAsh
    NeutralAsh
    FémininAge : 29Messages : 4

    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


    A-Lice
    A-Lice
    FémininAge : 30Messages : 4939

    Jeu 11 Juin 2015 - 21:56

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

    NeutralAsh
    NeutralAsh
    FémininAge : 29Messages : 4

    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 ??
    A-Lice
    A-Lice
    FémininAge : 30Messages : 4939

    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:

    Anonymous
    Invité

    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:
    Chione
    Chione
    MasculinAge : 23Messages : 397

    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



    Mission #7 - Animation, image qui tourne [Initié] 1435969469-signd
    FEZ!FEZ!
    Mission #7 - Animation, image qui tourne [Initié] 150804081846482087
    Alumine
    Alumine
    FémininAge : 27Messages : 487

    Ven 26 Juin 2015 - 20:45

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



    Alumine
    Chione
    Chione
    MasculinAge : 23Messages : 397

    Sam 27 Juin 2015 - 0:28

    Voilà!



    Mission #7 - Animation, image qui tourne [Initié] 1435969469-signd
    FEZ!FEZ!
    Mission #7 - Animation, image qui tourne [Initié] 150804081846482087
    A-Lice
    A-Lice
    FémininAge : 30Messages : 4939

    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:

    Dacota.
    Dacota.
    FémininAge : 30Messages : 39

    Dim 26 Juil 2015 - 22:33

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

    Ven 11 Sep 2015 - 2:33

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



    Mission #7 - Animation, image qui tourne [Initié] Oyl7
    Henrykiki
    Henrykiki
    MasculinAge : 32Messages : 576

    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 Jeu 12 Déc 2024 - 9:02