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

    Rappel du premier message :

    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



    Anarchy Rose
    FémininAge : 21Messages : 60

    le Mer 21 Oct 2015 - 15:33

    Merci beaucoup o/
    CCFlowdia
    FémininAge : 18Messages : 3

    le Jeu 5 Nov 2015 - 19:22

    ouaouh, merci beaucoup pour l'astuce~! \(^0^)/
    Nartiifiice
    FémininAge : 18Messages : 88

    le Ven 6 Nov 2015 - 1:15

    thanks
    Nyotengu
    FémininAge : 22Messages : 26

    le Lun 9 Nov 2015 - 17:58

    merci
    Smikyou
    FémininAge : 23Messages : 81

    le Ven 13 Nov 2015 - 1:27

    ty
    Gazelle-san
    FémininAge : 24Messages : 14

    le Sam 14 Nov 2015 - 15:41

    merci beaucoup omg **
    elfyqchan
    FémininAge : 20Messages : 46

    le Jeu 3 Déc 2015 - 21:34

    Merci ^^



    Nishiki
    FémininAge : 18Messages : 275

    le Sam 26 Déc 2015 - 0:48

    merci Wink



    Raeden Liddell
    MasculinAge : 24Messages : 177

    le Dim 27 Déc 2015 - 12:56

    Un gros merci
    Necrolythia
    FémininAge : 29Messages : 312

    le Ven 8 Jan 2016 - 9:57

    super , merci j'adore



    VincentWeever
    MasculinAge : 19Messages : 44

    le Ven 15 Jan 2016 - 14:26

    Merci
    Kobye
    FémininAge : 20Messages : 37

    le Mar 19 Jan 2016 - 6:36

    merci !!
    Lamire
    FémininAge : 23Messages : 83

    le Ven 26 Fév 2016 - 1:33

    Merci~~
    Sundaesys
    FémininAge : 21Messages : 7

    le Sam 27 Fév 2016 - 12:50

    Ca a l'air grave cool, merci ._. ♥
    miss69
    FémininAge : 33Messages : 40

    le Sam 5 Mar 2016 - 19:36

    Bonjour et merci pour ce tuto. Cela fait un moment que j'aimerai faire ça :)
    AQW
    FémininAge : 22Messages : 221

    le Dim 22 Mai 2016 - 0:29

    Oh tiens, un tuto que j'avais pas encore fouiner blblbl.
    Merci !

    Je vais essayée.



    Blblbl. ♥
    Summeryoid
    FémininAge : 22Messages : 32

    le Mer 25 Mai 2016 - 23:13

    Merci <3



    Jenifael92
    FémininAge : 14Messages : 12

    le Sam 25 Juin 2016 - 9:03

    Merci pour ce tutoriel ^^
    .Lucifer.
    MasculinAge : 43Messages : 148

    le Jeu 28 Juil 2016 - 12:35

    Merci ! Wink



    Nely Suglisse
    FémininAge : 21Messages : 62

    le Sam 30 Juil 2016 - 20:51

    Merci ! Very Happy
    KIRI
    FémininAge : 23Messages : 7

    le Dim 31 Juil 2016 - 4:30

    Wouah, c'est énorme, j'ai envie d'essayer ! :pompom:
    Linaewen
    FémininAge : 24Messages : 190

    le Ven 5 Aoû 2016 - 6:51

    Wow merci c'est une tuerie s'te truc *0*
    Kai Parker
    FémininAge : 18Messages : 119

    le Dim 4 Sep 2016 - 17:30

    Vraiment génial !! Merci beaucoup !!

    castamere rains
    FémininAge : 21Messages : 16

    le Ven 21 Oct 2016 - 12:33

    merci!
    bustyl
    MasculinAge : 53Messages : 7

    le Jeu 10 Nov 2016 - 15:35

    merci beaucoup
    Contenu sponsorisé

    Aujourd'hui à 21:26


      La date/heure actuelle est Sam 10 Déc 2016 - 21:26