Défilement - Rotation continue - Balancier ...
Les Animations complexes [CSS3]
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 -->
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>
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;
}
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...}
}
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%;}
}
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%;}
}
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;
}
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>
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>
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;
}
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...}
}
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);}
}
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;
}
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>
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;
}
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);}
}
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;
}
- 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;
}
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;
}
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
Enjoy x)
Dernière édition par Sparrow-style le Ven 9 Mai 2014 - 23:12, édité 1 fois
ben ça me fait plaisir^^
![Défilement, rotation continue, balancier...[CSS3 animations complexes] Tumblr_nenygwIlcz1s4u464o1_500](https://33.media.tumblr.com/fccf9645d54e1decde543249c75922a0/tumblr_nenygwIlcz1s4u464o1_500.gif)
![Défilement, rotation continue, balancier...[CSS3 animations complexes] Grec10](https://i.servimg.com/u/f58/18/14/80/87/grec10.png)
