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
    Ab0utxMe
    FémininAge : 22Messages : 182

    le Ven 17 Avr 2015 - 14:41

    Merci ^^



    avatar
    L*
    FémininAge : 23Messages : 44

    le Ven 1 Mai 2015 - 22:37

    Merci beaucoup =)
    avatar
    Black_cherry
    FémininAge : 19Messages : 13

    le Mer 6 Mai 2015 - 11:27

    Merci pour ce tuto !
    avatar
    Kraft
    FémininAge : 22Messages : 37

    le Lun 18 Mai 2015 - 19:23

    Impressionnant ! Very Happy
    avatar
    FAUCHEUSE ☠
    FémininAge : 21Messages : 68

    le Lun 25 Mai 2015 - 22:18

    Okééééééé c'est trop parfait pour mon prochain forum *w* Merci bien!
    avatar
    Akina-chan
    FémininAge : 24Messages : 138

    le Mar 26 Mai 2015 - 18:56

    Merci beaucoup ! <3
    avatar
    Wolf Valley
    FémininAge : 17Messages : 68

    le Mar 26 Mai 2015 - 20:46

    Cool *Q*
    avatar
    TiGraou
    MasculinAge : 24Messages : 223

    le Ven 29 Mai 2015 - 23:17

    Merci
    avatar
    Skotrip
    FémininAge : 22Messages : 12

    le Sam 6 Juin 2015 - 17:50

    Merci
    avatar
    rom4ne
    FémininAge : 16Messages : 16

    le Mar 16 Juin 2015 - 20:52

    Merci :heart:
    avatar
    Louchita
    FémininAge : 24Messages : 125

    le Ven 19 Juin 2015 - 19:28

    Intéressant tout sa *^*



    avatar
    Hippopotame
    FémininAge : 103Messages : 32

    le Sam 20 Juin 2015 - 22:51

    Merci :)
    avatar
    Flitch
    MasculinAge : 28Messages : 45

    le Lun 29 Juin 2015 - 3:56

    Ça m’intéresse! merci Sparrow
    avatar
    Ackey
    FémininAge : 22Messages : 9

    le Lun 29 Juin 2015 - 15:41

    C'trop fort, je trouve ce tutoriel au moment où je me demandais comment on pouvait faire ce type d'animation... Razz
    avatar
    Shaneliae
    FémininAge : 21Messages : 807

    le Lun 6 Juil 2015 - 1:13

    Je vais voir si cela peut m'aider un peu :hum:



    Présence réduite.
    avatar
    Hellow
    MasculinAge : 22Messages : 33

    le Lun 3 Aoû 2015 - 19:12

    Merci Wink
    avatar
    Nevida
    FémininAge : 26Messages : 29

    le Jeu 3 Sep 2015 - 22:19

    Merci beaucoup :) hâte de pouvoir m'en servir :)
    avatar
    Suisen
    FémininAge : 23Messages : 52

    le Ven 4 Sep 2015 - 20:31

    Merci beaucoup ♥
    avatar
    kodesh
    FémininAge : 26Messages : 8

    le Sam 19 Sep 2015 - 17:51

    Terrible ! Merci !!
    avatar
    BlueBerry ♪
    FémininAge : 19Messages : 133

    le Dim 27 Sep 2015 - 12:53

    merci!



    avatar
    Utauko
    FémininAge : 20Messages : 42

    le Mer 30 Sep 2015 - 9:23

    Merci pour le tuto :3
    avatar
    Damned
    FémininAge : 16Messages : 108

    le Sam 3 Oct 2015 - 21:50

    Merci!
    avatar
    Arisu
    FémininAge : 29Messages : 108

    le Mer 14 Oct 2015 - 18:13

    Merci !
    avatar
    Ah-l3x
    MasculinAge : 21Messages : 437

    le Dim 18 Oct 2015 - 1:56

    Merci.




    avatar
    Ombinou
    FémininAge : 22Messages : 104

    le Mar 20 Oct 2015 - 19:00

    Génial, merci ^^
    Contenu sponsorisé


      La date/heure actuelle est Mer 20 Sep 2017 - 2:14