AccueilDernières imagesRechercherS'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.

Le deal à ne pas rater :
Xiaomi Mi Smart Camera 2K Standard Edition (design compact / support ...
11.39 €
Voir le deal

    Défilement, rotation continue, balancier...[CSS3 animations complexes]

    Sparrow-style
    Sparrow-style
    FémininAge : 39Messages : 32055

    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 !

    I/ LE NUAGE

    Attention : pour que le code fonctionne et notamment l'animation, vous devez cocher "non" à "Optimiser votre css", paramètre qui se trouve en dessous de votre cadre de saisie de la feuille CSS de votre forum.


    Commençons par le nuage qui défile. Pour cela, vous avez besoin de l'image d'un nuage en transparence, ce qui est moins difficile à trouver qu'on pourrait croire. Tapez par exemple les mots "nuage png" sur google... L'autre solution pour avoir le nuage que le voulez est de le faire vous-même sur votre logiciel en utilisant des brushes.
    Une fois que vous avez votre image, il va falloir la placer dans le haut de page.

    1) le HTML

    Allez dans le template "Haut de page" (ou "overall_header") que vous trouverez dans "Affichage" > "Templates" > "Général" > "Haut de page".
    Placez vous après ce code :

    Code:
    <body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">
     <!-- BEGIN hitskin_preview -->
     <div id="hitskin_preview" style="display: block;">
     <h1><img src="http://2img.net/i/fa/hitskin/hitskin_logo.png" alt="" /> Hit<em>skin</em>.com</h1>
     <div class="content">
     <p>
     {hitskin_preview.L_THEME_SITE_PREVIEW}
     <br />
     <span>{hitskin_preview.U_INSTALL_THEME}<a href="http://{hitskin_preview.U_RETURN_THEME}">{hitskin_preview.L_RETURN_THEME}</a></span>
     </p>
     </div>
     </div>
     <!-- END hitskin_preview -->
    (lignes 201 à 213 dans le Template original)

    Et intégrez donc ceci juste à la suite (donc ligne 214) :

    Code:
    <div id="nuage_bloc"><div id="nuage"><img src="http://img15.hostingpics.net/pics/562528nuage.png" /></div></div>
    Il s'agit donc simplement d'un premier bloc de contenu, contenant un autre bloc qui lui contient l'image.
    N'oubliez pas de valider votre template !

    2) le CSS

    Si vous avez validé et que vous êtes allés voir le résultat vous avez pu constater que le nuage est fixe, en haut de forum, et qu'il décale tout vers le bas. Normal, il prend une place, les autres éléments se positionnent en fonction de lui aussi.
    Pour éviter cela nous allons le mettre en "absolute", afin qu'il soit par dessus les éléments qui le suivent. Commencez donc par mettre ceci dans votre CSS :

    Code:
    #nuage_bloc
    {
      position: absolute;
      top: 0;
      left: 0;
      widht: 100%;
      overflow: hidden;
      margin-top: -100px;
    }
    Nous avons donc ici placé notre nuage en absolute, il couvre alors les autres éléments. Le top "0" et left "0" sont pour caler le bloc à l'angle de la page entière, et être sûr qu'il ne soit décalé par rien d'autre. C'est important car nous allons ensuite le décaler hors de la page, il faut donc être sûr de sa position de départ.
    Le "width: 100%" indique que le bloc fera toute la largeur de page et le overflow "hidden" permet de masquer tout ce qui sortira du bloc et éviter l'apparition d'un scroll.
    Quant au "margin-top" il est ici totalement facultatif, c'est simplement pour vous montrer que vous pouvez monter ou descendre votre nuage, de sorte qu'il passe, par exemple, en bas de la bannière. C'est à vous d'adapter cette marge, voire de la retirer.

    Il faut maintenant faire bouger notre nuage, et pour cela nous allons utiliser un "keyframes". En gros il s'agit de décrire l'animation voulue, par étape, en ajoutant autant d'étape que désiré. Un keyframes d'animation se présente sous la forme suivante :

    Code:
    @keyframes nom_de_l_animation
    {
    0% {propriétés...}
    100% {propriétés...}
    }
    Vous avez donc le @keyframes qui ne change pas, puis un espace et le nom de l'animation que vous allez faire, dans mon cas je le nommerais "nuage". Ce nom importe peu, essayez juste de faire simple, sans caractère spéciaux évidemment.
    A l'intérieur des accolades se trouvent les étapes de l'animation. 0% c'est le stade de départ, 100% le stade d'arrivée. Il y a donc d'autres accolades ouvertes après le 0% afin que vous puissiez dire "au départ le style du bloc c'est ..." et d'autres accolades à 100% pour que vous puissiez donner les propriétés du bloc à l'arrivée.
    A ce stade, peu importe que l'animation soit en boucle ou pas, vous devez donner en fait juste une boucle d'animation.
    Il est possible d'ajouter d'autres étapes ! On verra ça pour le balancier du tableau donc pour le moment on se contentera du début + fin.

    Voilà ce que donne notre "keyframes" :

    Code:
    @keyframes nuage
    {
    0% {margin-left: -100%;}
    100% {margin-left: 100%;}
    }
    Pourquoi ? Alors nous avons placé notre bloc tout à l'heure en disant qu'il était collé au bord et qu'il avait la largeur de toute la page. L'étape 0% (du début donc) sera de décaler totalement ce bloc vers la gauche pour qu'il soit hors de la page. Il faut donc le décaler de sa largeur, donc 100%. L'avantage du pourcentage ici c'est que peu importe la largeur de l'écran, le bloc sortira forcément de la page puisque 100% = la largeur de page, peu importe la résolution.
    L'étape du 100% sera de faire sortir le bloc à nouveau, mais cette fois totalement à droite de la page, pour qu'il soit entièrement dehors. On passe donc d'une marge gauche totale (-100%) à une marge droite totale (100%). L'animation amènera donc l'objet à faire ce trajet.

    La compatibilité avec un maximum de navigateur étant importante, il faut développer un peu notre code avec les éléments que comprennent les autres navigateurs. Au final, notre keyframes donne ceci :
    Code:
    @keyframes nuage
    {
    0% {margin-left: -100%;}
    100% {margin-left: 100%;}
    }
    @-o-keyframes nuage
    {
    0% {margin-left: -100%;}
    100% {margin-left: 100%;}
    }
    @-moz-keyframes nuage
    {
    0% {margin-left: -100%;}
    100% {margin-left: 100%;}
    }
    @-webkit-keyframes nuage
    {
    0% {margin-left: -100%;}
    100% {margin-left: 100%;}
    }
    (Le premier est le code de base, classique. Le second rend compatible pour Opera, le second pour Firefox et le troisième pour Safari.

    On pourrait penser que c'est suffisant, mais en réalité le keyframes n'anime pas votre élément ! Il décrit simplement l'animation que vous voulez, mais il faut appliquer cette animation de la façon que vous connaissez déjà plus ou moins, ce sera simplement pas une "transition" mais bien une "animation".
    Voici ce que vous devez ajouter :

    Code:
    #nuage
    {
      animation: nuage 20s linear infinite;
      -o-animation: nuage 20s linear infinite;
      -webkit-animation: nuage 20s linear infinite;
      -moz-animation: nuage 20s linear infinite;
    }
    J'ai donc mon bloc "nuage" (le bloc contenant l'image) et ma ligne d'animation ainsi que les lignes permettant aux maximum de navigateur de comprendre la consigne. J'ai condensé les informations, mais nous avons, dans l'ordre :
    animation : le nom de l'animation - le temps total d'une boucle de l'animation - la vitesse d'animation - le nombre de fois que l'animation se répète.
    Nous avons donc ici : l'animation nommée "nuage" donc chaque boucle (donc un aller de 0% à 100%) durera 20s, la vitesse sera linéaire (même vitesse sans ralentissement ou accélération) et l'animation se répètera indéfiniment.

    Validez et regardez... Votre nuage bouge ! Il défile de gauche à droite sans rupture puisqu'il va d'un côté à l'autre de la page en sortant entièrement de celle-ci.

    PS : on pourrait ajouter comme élément un "délai", c'est à dire imposer qu'entre deux boucles l'animation s'arrête durant un temps défini. On obtiendrait alors un nuage qui passe, puis une fois sorti de la page il attendrait X secondes avant de réapparaitre de la gauche.

    Si vous souhaitez que vos nuages ne défilent QUE dans un bloc défini et non sur toute la largeur de page, il vous faut placer votre bloc à l'endroit voulu et lui donner une taille inférieure, en pixel généralement, de votre bloc. Ensuite le chiffre du décalage sera forcément égal à la largeur de ce bloc.

    Voilà donc pour notre nuage, vous pouvez très bien faire défiler ainsi plusieurs images de nuage à des vitesses différentes pour plus de réalisme, mais souvenez-vous que ça alourdi la page x).
    Au passage une précision : si votre bloc passe par dessus la bannière vous ne pourrez plus accéder au clic de celle-ci. La solution est alors de rendre le nuage cliquable, ou mieux de faire un lien global cliquable qui couvre tout votre bloc nuage, comme ceci (dans le HTML) :

    Code:
    <div id="nuage_bloc"><a href="/forum.htm" style="display: block; position: absolute; width: 100%; height: 100%;"></a><div id="nuage"><img src="http://img15.hostingpics.net/pics/562528nuage.png" /></div></div>
    Libre à vous ensuite de personnaliser cela comme vous le voulez, vous pouvez baisser la vitesse de défilement en augmentant le temps que met l'animation à réaliser une boucle par exemple.


    I/ LE SOLEIL

    Le nuage c'est bien, mais avec du soleil c'est mieux *o* nous allons donc l'ajouter, et pour que tout reste animé nous le ferons tourner continuellement x)

    1) HTML

    Comme pour le nuage nous allons commencer par placer notre image du soleil (icône météo trouvée sur google...) dans le template haut de page. Le chemin reste identique ("Affichage" > "Template" > "Haut de page"). Placez le code suivant au même endroit que le nuage (avant ou après, c'est à votre choix, vous pourrez toujours les inverser après coup de toute façon), c'est à dire vers la ligne 214 du template de base.

    Code:
    <div id="soleil_bloc"><div id="soleil"><img src="http://img15.hostingpics.net/pics/344028soleil.png" /></div></div>
    Validez et n'oubliez pas d'enregistrer votre template !

    2) Le CSS

    Allons ensuite positionner et animer notre soleil. Pour cela, ouvrez la feuille CSS. La première étape, comme précédemment, sera de placer notre bloc.

    Code:
    #soleil_bloc
    {
      position: absolute;
      top: 0;
      right: 0;
      widht: 256px;
      height: 256px;
      overflow: hidden;
    }
    Comme vous pouvez le voir il y a des similitudes avec le précédent placement. Le principe reste le même, mais puisque j'ai décidé de placer mon soleil à droite, je vais le caler d'abord totalement dans le coin droit. Je n'ai pas ajouté d'autres marges mais vous pouvez le décaler encore plus vers le haut et la droite de sorte qu'on ne voit qu'une partie du soleil et que le reste soit hors page. Rien n'affectera l'animation.

    Ajoutons ensuite nos keyframes, sous la même forme que tout à l'heure c'est à dire :

    Code:
    @keyframes soleil
    {
    0% {propriétés...}
    100% {propriétés...}
    }
    @-o-keyframes soleil
    {
    0% {propriétés...}
    100% {propriétés...}
    }
    @-moz-keyframes soleil
    {
    0% {propriétés...}
    100% {propriétés...}
    }
    @-webkit-keyframes soleil
    {
    0% {propriétés...}
    100% {propriétés...}
    }
    Je rappelle donc que le nom "soleil" est le nom de l'animation. Les différentes keyframes sont là pour qu'un maximum de navigateurs comprennent notre consigne d'animation.
    Voici l'animation que j'utilise, normalement vous la connaissez ou vous l'avez déjà rencontrée quelque part... :

    Code:
    @keyframes soleil
    {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
    }
    @-o-keyframes soleil
    {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
    }
    @-moz-keyframes soleil
    {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
    }
    @-webkit-keyframes soleil
    {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
    }
    Dans notre première étape, le positionnement de l'objet est à 0 degré, il est "droit". Dans la position finale, l'objet est à 360°, il est droit aussi. En fait il est placé exactement pareil à la première et à la dernière étape, c'est le fait de réaliser une transition entre ces deux états qui va donner l'animation.

    Astuce : si vous souhaitez faire tourner votre objet dans le sens inverse, mettez simplement un "-" devant le "360deg" !

    De la même façon que précédemment, l'animation est définie, mais elle n'est pas encore appliquée à notre élément. Nous allons donc l'ajouter :

    Code:
    #soleil
    {
      animation: soleil 6s linear infinite;
      -o-animation: soleil 6s linear infinite;
      -webkit-animation: soleil 6s linear infinite;
      -moz-animation: soleil 6s linear infinite;
    }
    J'ai donc mentionné que c'était bien l'animation "soleil" qui devait s'appliquer, qu'elle durait 6 secondes, qu'elle doit se dérouler à une vitesse constante et infiniment.
    Si j'avais mis "nuage" en nom d'animation nous aurions eut un soleil défilant (bien que l'animation n'aurait pas été bonne puisque le placement de l'élément est différent du nuage).

    Vous pouvez ici aussi ralentir la vitesse de rotation en augmentant le temps mis pour faire un tour (ici 6 secondes).


    I/ LE TABLEAU

    Passons à l'animation du balancier pour notre tableau au bout de sa chaîne. Le tableau est vide dans mon exemple car j'ai juste pris le render que j'ai trouvé, mais il faut bien sûr imaginer qu'il contienne une image, ou bien que ce soit une lanterne ou tout autre objet susceptible de se balancer x)

    1) HTML

    On démarre de la même façon en intégrant notre image dans le template "overall_header" (Haut de page), même endroit que les autres donc aux alentours de la ligne 214.

    Code:
    <div id="tableau_bloc"><div id="tableau"><img src="http://img15.hostingpics.net/pics/956096tableau.png" height="400" /></div></div>
    Remarque : j'ai réduis directement dans ce code la taille de l'image du tableau qui était à l'origine beaucoup plus grande. J'ai ici bloqué la hauteur à 400px donc le reste c'est adapté en se redimensionnant à l'échelle.

    2) Le CSS

    Positionnons notre image, j'ai choisi de la mettre à gauche, mais libre à vous de la mettre ailleurs... Le tout est que puisque notre image se balance c'est qu'elle est accrochée à quelque chose, donc il est préférable que l'image donne l'impression d'être accrochée au bord de page, sauf si bien sûr vous l'intégrez dans une image (fond de PA ou autre) et que vous la calez sur un plafond, une poutre ou que sais-je).

    Code:
    #tableau_bloc
    {
      position: absolute;
      width: 300px;
      top: 0;
      left: 0;
      overflow: hidden;
    }
    Voilà pour le positionnement, passons à l'animation. Celle-ci sera un peu plus complexe que les précédentes puisque nous allons avoir trois étapes. En effet, notre objet doit effectuer un mouvement de balancier de la gauche vers la droite, mais il doit ensuite revenir par le chemin inverse. Si vous ne mettez que deux étapes vous aurez votre objet qui fera : gauche > droite puis qui disparaitra, re-apparaitra sur la gauche pour refaire le balancier dans le même sens.

    Nous allons donc avoir ceci :

    Code:
    @keyframes tableau
    {
    0% {transform: rotate(-10deg);}
    50% {transform: rotate(10deg);}
    100% {transform: rotate(-10deg);}
    }
    @-o-keyframes tableau
    {
    0% {transform: rotate(-10deg);}
    50% {transform: rotate(10deg);}
    100% {transform: rotate(-10deg);}
    }
    @-moz-keyframes tableau
    {
    0% {transform: rotate(-10deg);}
    50% {transform: rotate(10deg);}
    100% {transform: rotate(-10deg);}
    }
    @-webkit-keyframes tableau
    {
    0% {transform: rotate(-10deg);}
    50% {transform: rotate(10deg);}
    100% {transform: rotate(-10deg);}
    }
    Notre objet va donc de -10 degré vers 10 degré, puis une fois à 10 degré retourne à -10 degré. Avec ces étapes nous avons notre boucle complète.
    Reste à appliquer l'animation sur l'objet, et là il faut bien imaginer le problème que l'on va rencontrer... Si vous essayez de faire une application comme pour les autres animations, donc comme ceci :

    Code:
    #tableau
    {
      animation: tableau 3s linear infinite;
      -o-animation: tableau 3s linear infinite;
      -webkit-animation: tableau 3s linear infinite;
      -moz-animation: tableau 3s linear infinite;
    }
    Vous allez bien avoir votre rotation, mais la rotation se fait autour du centre de l'image ! Comme pour le soleil qui tourne en ayant pour point d'ancrage son centre... En effet, les rotations, par défaut, se font en ayant pour point d'ancrage le milieu de l'image. C'est un problème, car nous, nous voulons que ce point soit le haut de la chaine, donc le milieu oui mais le milieu du HAUT de l'image... Heureusement, il est possible de changer cela x) (sinon je ne serais pas arrivé à mon résultat sur l'exemple). Vous devrez donc ajouter une origine à la transformation, comme ceci :

    Code:
    #tableau
    {
      animation: tableau 3s linear infinite;
      -o-animation: tableau 3s linear infinite;
      -webkit-animation: tableau 3s linear infinite;
      -moz-animation: tableau 3s linear infinite;
      transform-origin: 50% 0;
    }
    Le premier nombre (50%) est la distance vers la droite horizontalement, et le "0" représente la distance du haut de l'image verticalement. Nous sommes donc bien à la moitié de l'image mais totalement en haut de celle-ci.

    Bien ! Nous avons donc notre animation de balancier... Cependant, si vous comparez votre animation actuelle et la mienne il y a une différence : dans votre cas l'animation a une vitesse constante ce qui fait qu'arrivé aux extrêmes (totalement à droite ou totalement à gauche) on dirait que votre objet heurte un mur car il repart très sèchement de l'autre côté... Ce n'est pas naturel, pas réaliste, car un balancier ralenti à chaque fois qu'il remonte un peu, jusqu'à s'arrêter un millième de seconde puis repartir dans l'autre sens.
    Pour changer cela afin que notre animation soit plus réaliste, il va falloir changer la constance de la vitesse, donc notre "linear" ne convient pas ! La courbe de vitesse de notre objet doit faire "lent-rapide-lent", et ceci s'appelle "ease-in-out".
    Voici donc le bon code css pour appliquer notre animation :

    Code:
    #tableau
    {
      animation: tableau 3s ease-in-out infinite;
      -o-animation: tableau 3s ease-in-out infinite;
      -webkit-animation: tableau 3s ease-in-out infinite;
      -moz-animation: tableau 3s ease-in-out infinite;
      transform-origin: 50% 0;
    }
    Regardez le résultat, vous verrez que c'est nettement mieux ^^


    Voilà, ce tutoriel est terminé, il vous présente trois animations différentes que vous pouvez ensuite vous amuser à personnaliser comme bon vous semble !
    Je ferais cependant une étape de cursus sur les animations afin que tout expliquer en détail, j'ai pensé qu'en premier lieu une application directe, même si vous ne possédez pas tout les éléments, était plus ludique qu'un bourrage de crâne sur une dizaine de termes et de propriétés.

    Si vous utilisez ce tutoriel merci de mettre un crédit à Never-Utopia, en remerciement Wink

    Enjoy x)


    Dernière édition par Sparrow-style le Ven 9 Mai 2014 - 23:12, édité 1 fois



    sign
    o~°Passion HELL
    o~°Passion HELL
    FémininAge : 35Messages : 215

    Ven 3 Jan 2014 - 22:46

    Merci pour le tuto Very Happy



    ....
    Offrande
    Offrande
    FémininAge : 32Messages : 194

    Dim 5 Jan 2014 - 6:20

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

    Ven 10 Jan 2014 - 18:14

    C'est magnifique !!
    Merci.
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Ven 10 Jan 2014 - 18:29

    Merci ^^



    Pastomaniac
    Pastomaniac
    FémininAge : 27Messages : 194

    Mar 14 Jan 2014 - 4:02

    Merci *Q*



    Défilement, rotation continue, balancier...[CSS3 animations complexes] - Page 2 130813091054601890
    DixieM.
    DixieM.
    FémininAge : 32Messages : 49

    Mar 14 Jan 2014 - 18:11

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

    Jeu 16 Jan 2014 - 23:15

    Merci beaucoup ;3 .



    Défilement, rotation continue, balancier...[CSS3 animations complexes] - Page 2 Siiiig10
    MonsterYuki
    MonsterYuki
    FémininAge : 28Messages : 22

    Mer 22 Jan 2014 - 17:13

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



    Défilement, rotation continue, balancier...[CSS3 animations complexes] - Page 2 Firewo10
    Mimisu
    Mimisu
    FémininAge : 28Messages : 9

    Mer 22 Jan 2014 - 20:00

    Merci beaucoup :3
    Lady Doll
    Lady Doll
    FémininAge : 35Messages : 101

    Jeu 23 Jan 2014 - 11:13

    merci !
    Celska
    Celska
    FémininAge : 28Messages : 39

    Dim 26 Jan 2014 - 13:27

    Trop cool ! Merci !!



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

    Dim 26 Jan 2014 - 16:39

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



    Défilement, rotation continue, balancier...[CSS3 animations complexes] - Page 2 241091dfsdfds
    Yukiji
    Yukiji
    MasculinAge : 23Messages : 115

    Lun 27 Jan 2014 - 0:15

    Merci!



    (c) sygea
    Jenova
    Jenova
    MasculinAge : 29Messages : 153

    Lun 27 Jan 2014 - 18:53

    Merci =)



    Défilement, rotation continue, balancier...[CSS3 animations complexes] - Page 2 I3k3
    skyfighter
    skyfighter
    MasculinAge : 41Messages : 352

    Lun 27 Jan 2014 - 19:00

    merci




    Défilement, rotation continue, balancier...[CSS3 animations complexes] - Page 2 Signat10
    Buttercup -
    Buttercup -
    FémininAge : 22Messages : 5

    Ven 31 Jan 2014 - 21:46

    Ouah ! C'est géant *___*
    Kira de Shola
    Kira de Shola
    FémininAge : 26Messages : 60

    Jeu 6 Fév 2014 - 10:45

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

    Ven 14 Fév 2014 - 11:07

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

    Dim 16 Fév 2014 - 13:39

    Merci =3
    Tenshia
    Tenshia
    FémininAge : 38Messages : 6

    Lun 17 Fév 2014 - 22:17

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

    Jeu 20 Fév 2014 - 11:45

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

    Jeu 20 Fév 2014 - 22:44

    merci
    Mayiie
    Mayiie
    FémininAge : 33Messages : 39

    Ven 21 Fév 2014 - 19:46

    Merci ! Very Happy
    Miss Ryuichi
    Miss Ryuichi
    FémininAge : 32Messages : 36

    Jeu 27 Fév 2014 - 16:51

    génial, merci !!
    Aelita
    Aelita
    FémininAge : 31Messages : 278

    Jeu 27 Fév 2014 - 22:39

    Merci beaucoup ^^
    Contenu sponsorisé


      La date/heure actuelle est Jeu 28 Mar 2024 - 9:46