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.


    Défilement, rotation continue, balancier...[CSS3 animations complexes]

    Partagez
    Okhmhaka
    FémininAge : 31Messages : 31725

    le Lun 2 Déc 2013 - 14:54

    Défilement - Rotation continue - Balancier ...
    Les Animations complexes [CSS3]



    Dans ce tutoriel je souhaite aborder les animations "complexes", même si ce terme n'est peut-être pas le bon, disons plutôt l'élaboration d'animations, en CSS3. Qu'est-ce que ça donne concrètement ? Eh bien le parfait exemple est le site web de Never-Utopia :
    - la lanterne qui se balance
    - les nuages qui défilent
    - les bulles qui remontent
    - les rouages qui tournent
    - les lueurs qui semblent réelles
    etc.

    C'est quelque chose qui semble complexe au premier abord mais qui ne l'est pas tant que ça, et surtout qui permet énormément de possibilités une fois qu'on a compris le principe ! Il y aurait énormément d'animations différentes à voir et à faire, mais dans ce premier tutoriel (j'en ferais peut-être d'autres ensuite sur ce type d'animation) je vais présenter trois animations différentes :
    - un défilement (avec des nuages)
    - une rotation (avec un soleil)
    - un balancier (avec une sorte de cadre au bout d'une chaine)

    Forum test

    Vous avez donc ces éléments en haut de page. N'ayant pas mon logiciel de graphisme sous la main à ce moment là, j'ai simplement utilisé des images ou icônes trouvées sur internet.
    Ce tutoriel a donc pour but de vous apprendre à placer et animer les trois objets cités plus haut. Libre à vous par la suite de les remplacer par ce que vous voulez !



    Dernière édition par Sparrow-style le Ven 9 Mai 2014 - 23:12, édité 1 fois



    Ehawee
    FémininAge : 24Messages : 4513

    le Lun 2 Déc 2013 - 15:29

    *_* Mais... mais... mais c'est une tuerie! (et super clair en plus), bon... bah... je sais sur quoi je vais bosser une fois que j'aurai fini mes dossiers en retard moi xD

    (merci cap'taine *-*)





    gif1gif2
    Okhmhaka
    FémininAge : 31Messages : 31725

    le Lun 2 Déc 2013 - 15:35

    Héhéhé x) merci ^^ Content que ça te plaise et bosse bien alors Razz



    Ehawee
    FémininAge : 24Messages : 4513

    le Lun 2 Déc 2013 - 16:07

    hihi ^^ c'est prévu (un de tes tutos m'a déjà sauvé la vie hier, donc... xD j'commence à être habituée au fait de trouver mes réponses dans les LS et tutos du forum ^^)





    gif1gif2
    Okhmhaka
    FémininAge : 31Messages : 31725

    le Lun 2 Déc 2013 - 16:24

    Ah Very Happy ben ça me fait plaisir^^



    Depp
    FémininAge : 25Messages : 297

    le Ven 6 Déc 2013 - 16:25

    un énorme merciiii !!!! je viens d'avoir des idées à faire avec ça ** s'cool !!!! Very Happy



    Okhmhaka
    FémininAge : 31Messages : 31725

    le Ven 6 Déc 2013 - 17:33

    Avec plaisir^^ Content de voir qu'il y a des gens à qui ça ne fait pas peur Razz



    louha
    FémininAge : 29Messages : 212

    le Ven 6 Déc 2013 - 17:45

    et c'est parti pour une migraine pour tenter d'arriver à faire ça ! Merci patron Very Happy
    fascicularia
    MasculinAge : 48Messages : 181

    le Sam 7 Déc 2013 - 17:38

    Superbe. Merci Sparrow
    Plume'
    FémininAge : 18Messages : 166

    le Dim 8 Déc 2013 - 9:46

    Merci beaucoup !
    0pium
    FémininAge : 23Messages : 20

    le Jeu 12 Déc 2013 - 14:00

    ça a l'air carrément chouette, merci :o
    Akito
    MasculinAge : 24Messages : 71

    le Dim 15 Déc 2013 - 4:43

    Merci beaucoup :)

    J'ai voulu mettre le balancier, mais ca ne marche pas....

    http://exo-pandora.forumactif.com/

    De plus pareil, j'ai voulu le mettre a droit en mettant "right" a position, mais il veut rien savoir... Sad
    Okhmhaka
    FémininAge : 31Messages : 31725

    le Dim 15 Déc 2013 - 19:33

    Ce n'est pas en mettant "right" que tu le mettras à droite... Je te conseille de bien lire le tutoriel Wink



    younessdu91
    MasculinAge : 18Messages : 92

    le Dim 15 Déc 2013 - 20:38

    Merci !
    Whitemoon
    FémininAge : 16Messages : 695

    le Dim 15 Déc 2013 - 20:51

    Merci beaucoup super bien expliqué !
    Pourtant j'ai beau copier coller le code pour le nuage ça ne marche pas...
    Kripterya
    FémininAge : 30Messages : 98

    le Lun 16 Déc 2013 - 4:32

    Is the tutorial? Let me check, thanks!!!
    Etakine
    MasculinMessages : 17

    le Lun 16 Déc 2013 - 17:18

    Merci, je veux bien voir ça !
    Seiten
    FémininAge : 25Messages : 12

    le Lun 16 Déc 2013 - 19:08

    merci
    Sacagawea
    FémininAge : 20Messages : 235

    le Mar 17 Déc 2013 - 21:20

    Oh je me demandais l'autre fois comment les ajouter :innocent: 
    Thanks sparrow  ham1 
    Sweet Angel
    FémininAge : 33Messages : 125

    le Ven 20 Déc 2013 - 11:39

    Un grand merci!
    Skyleen
    FémininAge : 24Messages : 476

    le Ven 20 Déc 2013 - 16:22

    Super ! merci beaucoup



    2013 ▬
    Commandes en cours : 0    ▬ Commandes finis : 2
    Igorette.
    FémininAge : 20Messages : 41

    le Dim 22 Déc 2013 - 16:58

    merciii
    ♦ Mari-Jane
    FémininAge : 24Messages : 39

    le Jeu 26 Déc 2013 - 15:33

    Merci Very Happy
    Sinavlia
    FémininAge : 19Messages : 158

    le Mar 31 Déc 2013 - 4:16

    Merci beaucoup, je sens que ça va m'être bien utile !  :love: 



    pixelman
    FémininAge : 36Messages : 237

    le Jeu 2 Jan 2014 - 0:10

    Je me demandais justement comment étaient faites ces animations *..* ma curiosité va être assouvie, merci !




    Vit pour manger que de manger pour vivre !
    Citation du jour a écrit:"C'est avec une main sur le coeur que je te dis 'je t'aime',
    mais c'est avec un sourire que je te dis 'je te hais'.... "

    Contenu sponsorisé

    Aujourd'hui à 7:02


      La date/heure actuelle est Dim 11 Déc 2016 - 7:02