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
    Kaamee
    FémininAge : 21Messages : 110

    le Dim 9 Nov 2014 - 14:36

    Merci o/



    avatar
    Emelyne
    FémininAge : 35Messages : 77

    le Lun 10 Nov 2014 - 22:14

    merci
    avatar
    Daydream
    FémininAge : 19Messages : 44

    le Mer 12 Nov 2014 - 23:05

    Merci ! Very Happy
    avatar
    Nephilime
    FémininAge : 21Messages : 147

    le Mar 18 Nov 2014 - 21:50

    Joli joli joli *w*
    *fixe la chaîne*

    Merci !
    avatar
    sica3
    MasculinAge : 43Messages : 135

    le Mer 3 Déc 2014 - 0:53

    thank's
    avatar
    CookieStorm
    FémininAge : 26Messages : 4

    le Ven 5 Déc 2014 - 23:22

    Merci!
    avatar
    Alekk
    MasculinAge : 26Messages : 24

    le Dim 7 Déc 2014 - 14:04

    Wow c'est génial, merci énormément !!! :friends:
    Plus qu'à tenter ! Very Happy





    Aeronauths' crew member


    avatar
    Maya Seiko
    FémininAge : 23Messages : 121

    le Mar 16 Déc 2014 - 17:09

    c'est trop bien ^^ merci
    avatar
    Kamora
    MasculinAge : 24Messages : 18

    le Mar 16 Déc 2014 - 17:29

    Je suis intrigué o/
    avatar
    Ayameko
    FémininAge : 39Messages : 36

    le Ven 19 Déc 2014 - 17:15

    merci bien !
    avatar
    Ajartielle
    FémininAge : 29Messages : 87

    le Ven 19 Déc 2014 - 17:31

    C'est possible de faire ça juste en CSS ? affraid

    Je DOIS savoir comment. Haha ! Merciiii pour ce tuto !
    avatar
    Saphire
    FémininAge : 19Messages : 146

    le Mar 23 Déc 2014 - 14:28

    merci
    avatar
    Youp
    FémininAge : 22Messages : 574

    le Sam 10 Jan 2015 - 4:13

    C'est une pure tuerie ! Je ne pense pas l"utiliser mais je tenais à le dire ! Merci Okhmaka



    avatar
    sangoku46
    MasculinAge : 24Messages : 26

    le Mar 13 Jan 2015 - 18:45

    Merci bien!
    avatar
    Frosty Blue
    FémininAge : 21Messages : 161

    le Ven 16 Jan 2015 - 14:44

    Merci ^^
    avatar
    Kianda
    MasculinAge : 16Messages : 88

    le Lun 19 Jan 2015 - 13:27

    merci ^^



    avatar
    Milou
    FémininAge : 18Messages : 163

    le Ven 30 Jan 2015 - 12:53

    Merci beaucoup, ça à l'air vraiment sympa !



    avatar
    Hana Evali
    FémininAge : 27Messages : 163

    le Sam 14 Fév 2015 - 12:44

    Merci beaucoup ^^



    avatar
    Bleu
    FémininAge : 19Messages : 14

    le Mar 17 Fév 2015 - 10:02

    Merci beaucoup !
    avatar
    AyaseNeko
    FémininAge : 20Messages : 55

    le Mar 3 Mar 2015 - 13:05

    merciii !
    avatar
    AyaseNeko
    FémininAge : 20Messages : 55

    le Mar 3 Mar 2015 - 14:51

    Coucou,
    Merci du tuto,
    j'ai un petit problème avec le tableau je n'arrive pas a le mettre tout en haut de la page
    avatar
    AyaseNeko
    FémininAge : 20Messages : 55

    le Mar 3 Mar 2015 - 14:56

    ces bon j'ai trouver le problème j'ai oublier de mettre px derrière le chiffre ^^
    avatar
    Fleurine
    FémininAge : 17Messages : 75

    le Ven 20 Mar 2015 - 18:23

    merci !!!
    avatar
    Moys
    FémininAge : 19Messages : 101

    le Lun 6 Avr 2015 - 21:49

    Merci !
    avatar
    Anazera
    MasculinAge : 20Messages : 37

    le Ven 17 Avr 2015 - 0:02

    Merci
    Contenu sponsorisé


      La date/heure actuelle est Sam 24 Juin 2017 - 17:43