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
    Kiwix
    FémininAge : 22Messages : 66

    le Ven 25 Nov 2016 - 13:16

    Super sympa comme Tuto ! Merci Wink
    avatar
    November
    MasculinAge : 17Messages : 43

    le Mer 21 Déc 2016 - 12:49

    Mercii *-*
    avatar
    Whisperinette
    FémininAge : 25Messages : 16

    le Mar 27 Déc 2016 - 23:30

    J'adore ! *.*
    Merci merci merci :hug:
    avatar
    Lealily
    FémininAge : 26Messages : 20

    le Jeu 2 Mar 2017 - 16:03

    Interessant Very Happy
    avatar
    Crépuscule de Lune
    FémininAge : 28Messages : 44

    le Lun 5 Juin 2017 - 17:41

    Merci beaucoup, ça faisait un moment que je cherchais comment faire bouger un élément comme la lanterne ^^




    Contenu sponsorisé


      La date/heure actuelle est Ven 18 Aoû 2017 - 23:48