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 : 31721

    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



    Ecume
    FémininAge : 20Messages : 3

    le Dim 8 Juin 2014 - 14:53

    j'adopte direct ♥
    Skitty
    FémininAge : 20Messages : 50

    le Ven 13 Juin 2014 - 20:57

    Merci !
    Sépia
    FémininAge : 20Messages : 70

    le Jeu 19 Juin 2014 - 17:00

    Merci!!!
    Smokerlilitrope
    FémininAge : 27Messages : 35

    le Dim 22 Juin 2014 - 11:30

    Le symbole qui balance m'intrigue comme code :)
    merci beaucoup
    Kiki85
    MasculinAge : 21Messages : 366

    le Dim 22 Juin 2014 - 17:54

    Je suis curieux :3 Merci d'avance !
    Jawilsia
    FémininAge : 24Messages : 143

    le Sam 28 Juin 2014 - 18:39

    Merci *0*
    Oror
    FémininAge : 26Messages : 93

    le Mar 1 Juil 2014 - 20:10

    Merci beaucoup pour ce tuto !! =)



    Javarakita
    FémininAge : 16Messages : 86

    le Jeu 3 Juil 2014 - 10:29

    Wouahou super *-*
    Stydia
    FémininAge : 17Messages : 71

    le Ven 4 Juil 2014 - 18:11

    Merci Wink




    Marwin
    MasculinAge : 24Messages : 47

    le Sam 5 Juil 2014 - 22:45

    merci
    LunaRiza
    FémininAge : 22Messages : 29

    le Lun 7 Juil 2014 - 10:12

    merchi *^*
    Etyncelle
    FémininAge : 17Messages : 12

    le Dim 13 Juil 2014 - 16:02

    Merci beaucoup!



    EricSouvaltzis
    MasculinAge : 17Messages : 47

    le Lun 28 Juil 2014 - 1:15

    merci
    Le Dévoreur de temps
    MasculinAge : 37Messages : 57

    le Jeu 31 Juil 2014 - 21:58

    Merci beaucoup pour le partage !
    Givrix
    MasculinAge : 19Messages : 198

    le Jeu 28 Aoû 2014 - 15:09

    Merci !



    Merino
    MasculinAge : 21Messages : 55

    le Sam 30 Aoû 2014 - 12:54

    Merci une fois de plus pour ce partage, qui risque de m'être fort utile !
    Miau
    FémininAge : 16Messages : 14

    le Sam 30 Aoû 2014 - 16:15

    Merci !
    Pee-Boo
    FémininAge : 24Messages : 28

    le Jeu 25 Sep 2014 - 20:34

    Merci tongue
    Concierge
    MasculinAge : 36Messages : 67

    le Sam 27 Sep 2014 - 10:56

    Merci beaucoup, ces effets sont vraiment class !!



    Very Happy
    Concierge
    MasculinAge : 36Messages : 67

    le Sam 27 Sep 2014 - 11:57

    Pardon pour le double poste mais on ne peut pas éditer !

    je voulais préciser que pour mon animation j'ai utilisé un PNG d'une clé, or comme le png (image) faisait juste la taille de la clé ben mon animation était serrée ( ma clé disparaissait derrière un mur invisible de chaque cotés.)

    J'ai eu l'idée de faire mon PNG bien plus grand que l'image elle même et ça fonctionne super;
    Je sais pas si vous avez compris mes explications.. mais peut être faudrait il le préciser Wink

    merci , mon forum est plus joli comme ça cheers



    Very Happy
    Alumine
    FémininAge : 19Messages : 486

    le Jeu 2 Oct 2014 - 10:53

    Merci ! (=




    Before...:

    mon ange gardien ♥
    Chocolakato
    FémininAge : 26Messages : 762

    le Jeu 2 Oct 2014 - 13:36

    aaaah tiens?
    Et bien merci o_o !



    Freeze
    MasculinAge : 26Messages : 9

    le Dim 26 Oct 2014 - 12:20

    :o Merci !!!
    Kjellska
    FémininAge : 28Messages : 40

    le Dim 26 Oct 2014 - 13:37

    Pas mal,merci!



    Ip-Man
    MasculinAge : 19Messages : 18

    le Mar 28 Oct 2014 - 13:06

    Trop génial merci
    Contenu sponsorisé

    Aujourd'hui à 6:02


      La date/heure actuelle est Sam 10 Déc 2016 - 6:02