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
    avatar
    Okhmhaka
    FémininAge : 32Messages : 31851

    le Lun 2 Déc 2013 - 14:54

    Rappel du premier message :



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


    Édit Responsable : Ce tutoriel utilise des animations. Si vous ne connaissez pas le fonctionnement, je vous suggère de lire ce tutoriel afin de comprendre les bases.


    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



    avatar
    Badaric
    MasculinAge : 27Messages : 21

    le Dim 2 Mar 2014 - 12:40

    Merci beaucoup
    avatar
    Rena Natsume
    FémininAge : 21Messages : 23

    le Sam 8 Mar 2014 - 17:23

    Merci
    avatar
    Swethlana.
    FémininAge : 18Messages : 24

    le Ven 14 Mar 2014 - 23:26

    Ça m'intéresse beaucoup ! Merci o/
    avatar
    Eoleum
    FémininAge : 25Messages : 15

    le Mer 19 Mar 2014 - 22:33

    Merci ^^
    avatar
    Itachi28
    FémininAge : 20Messages : 47

    le Dim 23 Mar 2014 - 17:06

    Merci! :3
    avatar
    nuanciel
    FémininAge : 25Messages : 124

    le Lun 24 Mar 2014 - 11:25

    soyons fou ! testons ! Very Happy merci ^^
    avatar
    Emma-Iseult
    FémininAge : 20Messages : 44

    le Mer 26 Mar 2014 - 21:48

    Merci !
    avatar
    Livia666
    FémininAge : 29Messages : 49

    le Ven 28 Mar 2014 - 15:26

    Magnifique partage, merci beaucoup !
    avatar
    Raween
    FémininAge : 25Messages : 110

    le Dim 30 Mar 2014 - 7:48

    Merci beaucoup ^^
    avatar
    LyN[ss]
    FémininAge : 25Messages : 105

    le Sam 5 Avr 2014 - 23:21

    Oh mon dieu, depuis le temps que je voulais apprendre à faire cela !
    Dire que je suis passée au dessus du sujet un millier de fois sans me rendre compte qu'il était là. ><
    Merci beaucoup, ça va changer ma vie d'apprentie codeuse *-*



    ❝Y.O.U G.E.T L.Y.N.[.S.S.].'.E.D❞
    how could you hate me? When all I ever wanted to be was you ? How could you love me? When all you ever gave me were open wounds ? Tell me why you broke me down and betrayed my trust in you ?
    avatar
    Lidia64
    FémininAge : 19Messages : 60

    le Dim 6 Avr 2014 - 10:40

    Merci !



    Twedle
    MasculinAge : 21Messages : 17

    le Dim 6 Avr 2014 - 19:53

    Merci beaucoup ! :)
    avatar
    Geniustyx
    FémininAge : 19Messages : 31

    le Lun 7 Avr 2014 - 20:13

    Superbe! Merci beaucoup! :)
    avatar
    Aya Hanazawa
    FémininAge : 26Messages : 72

    le Lun 7 Avr 2014 - 20:16

    merci !
    avatar
    Choubakawa
    MasculinAge : 23Messages : 59

    le Lun 7 Avr 2014 - 22:08

    Merci ^^



    avatar
    Natsumi13
    FémininAge : 21Messages : 64

    le Mar 15 Avr 2014 - 16:22

    Merci cap'taine t'es le meilleur!
    avatar
    Aaw.
    FémininAge : 20Messages : 29

    le Sam 26 Avr 2014 - 8:16

    C'est justement ce que je cherchais, merci beaucoup **
    avatar
    Nina.
    FémininAge : 24Messages : 2

    le Dim 27 Avr 2014 - 23:57

    Merci !!
    avatar
    Saia
    FémininAge : 22Messages : 182

    le Jeu 1 Mai 2014 - 19:11

    Merci!!!



    avatar
    Noob's
    MasculinAge : 22Messages : 129

    le Sam 3 Mai 2014 - 23:26

    Merci du partage
    avatar
    Elora Hanta
    FémininAge : 25Messages : 69

    le Jeu 15 Mai 2014 - 11:11

    Très utile  Very Happy 
    avatar
    Percylove
    FémininAge : 22Messages : 254

    le Ven 16 Mai 2014 - 1:03

    Oh chouette tuto, j'espère pouvoir y arriver!



    avatar
    Canibal
    FémininAge : 25Messages : 26

    le Ven 16 Mai 2014 - 10:26

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

    le Jeu 29 Mai 2014 - 13:11

    Je suis curieuse de voir comment c'est fait :hum:

    avatar
    Melvinn
    MasculinAge : 26Messages : 9

    le Jeu 5 Juin 2014 - 14:10

    Merci :)
    Contenu sponsorisé


      La date/heure actuelle est Sam 24 Juin 2017 - 0:20