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
    o~°Passion HELL
    FémininAge : 29Messages : 209

    le Ven 3 Jan 2014 - 22:46

    Merci pour le tuto Very Happy



    ....
    avatar
    Offrande
    FémininAge : 26Messages : 193

    le Dim 5 Jan 2014 - 6:20

    Whouuu!! Génial, sa doit rendre vraiment bien, je te remercie de tout coeur pour le partage Wink !
    avatar
    Lilie
    FémininAge : 34Messages : 155

    le Ven 10 Jan 2014 - 18:14

    C'est magnifique !!
    Merci.
    avatar
    Onyx
    FémininAge : 23Messages : 2980

    le Ven 10 Jan 2014 - 18:29

    Merci ^^



    avatar
    Pastomaniac
    FémininAge : 21Messages : 194

    le Mar 14 Jan 2014 - 4:02

    Merci *Q*



    avatar
    DixieM.
    FémininAge : 25Messages : 49

    le Mar 14 Jan 2014 - 18:11

    Mais c'est genial *-* et ca donne tout pleiiiiins d'idées  :love: 
    Merciiiiiiiiiiiiiiiiiiiii o/
    avatar
    Chou.
    FémininAge : 21Messages : 22

    le Jeu 16 Jan 2014 - 23:15

    Merci beaucoup ;3 .



    avatar
    MonsterYuki
    FémininAge : 22Messages : 22

    le Mer 22 Jan 2014 - 17:13

    Merci! C'est justement ce qu'il me manquait :)



    avatar
    Mimisu
    FémininAge : 21Messages : 9

    le Mer 22 Jan 2014 - 20:00

    Merci beaucoup :3
    avatar
    Lady Doll
    FémininAge : 28Messages : 101

    le Jeu 23 Jan 2014 - 11:13

    merci !
    avatar
    Celska
    FémininAge : 22Messages : 37

    le Dim 26 Jan 2014 - 13:27

    Trop cool ! Merci !!



    NORTH WITCH ♒
    image de l'avatar par Fernanda Suarez (c)
    avatar
    Amariem
    FémininAge : 18Messages : 98

    le Dim 26 Jan 2014 - 16:39

    Tu es vraiment un dieu ...
    Allez, allons tester tout ça !



    avatar
    Yukiji
    FémininAge : 17Messages : 93

    le Lun 27 Jan 2014 - 0:15

    Merci!



    avatar
    Jenova
    MasculinAge : 23Messages : 125

    le Lun 27 Jan 2014 - 18:53

    Merci =)



    avatar
    skyfighter
    MasculinAge : 34Messages : 350

    le Lun 27 Jan 2014 - 19:00

    merci





    avatar
    Buttercup -
    FémininAge : 16Messages : 5

    le Ven 31 Jan 2014 - 21:46

    Ouah ! C'est géant *___*
    avatar
    Kira de Shola
    FémininAge : 20Messages : 59

    le Jeu 6 Fév 2014 - 10:45

    Merci beaucouuuup.
    avatar
    Rowana
    FémininAge : 15Messages : 22

    le Ven 14 Fév 2014 - 11:07

    Merci beaucoup! J'adore le balancier et le nuage!
    avatar
    Naïshy
    FémininAge : 15Messages : 65

    le Dim 16 Fév 2014 - 13:39

    Merci =3
    avatar
    Tenshia
    FémininAge : 31Messages : 6

    le Lun 17 Fév 2014 - 22:17

    merci ça a l'air super :)
    avatar
    LightGlace
    FémininAge : 24Messages : 43

    le Jeu 20 Fév 2014 - 11:45

    ça à l'air génial ! merci !
    avatar
    Databar
    MasculinAge : 23Messages : 142

    le Jeu 20 Fév 2014 - 22:44

    merci
    avatar
    Mayiie
    FémininAge : 26Messages : 38

    le Ven 21 Fév 2014 - 19:46

    Merci ! Very Happy
    avatar
    Miss Ryuichi
    FémininAge : 25Messages : 34

    le Jeu 27 Fév 2014 - 16:51

    génial, merci !!
    avatar
    Aelita
    FémininAge : 24Messages : 277

    le Jeu 27 Fév 2014 - 22:39

    Merci beaucoup ^^
    Contenu sponsorisé


      La date/heure actuelle est Mar 26 Sep 2017 - 14:56