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

Lun 2 Déc 2013 - 14:54

Sparrow-style

Age : 39Messages : 32055

Lun 2 Déc 2013 - 14:54

Rappel du premier message :

#html #css #css3 #auteur_Okhmhaka

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}">  <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>

(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