Comme c'est une première version pour moi, j'ai passé plus de temps dans les réglages de positionnement que pour le reste...
Guadalajara. Mexique
Photos http://www.terragalleria.com
Après avoir réaliser ce montage, j'ai eu, comme d'habitude, envie de partager mon expérience et, pour ne pas surcharger cet article, je vais masquer les explications, par le code: "lire la suite" .
Tout d'abord, la boite de fond dont la seule originalité est le dégradé radial des couleurs.
le code du fond:
<div style="width: 640px; margin: 10px 0px 15px 10px; border: 8px ridge #440000; padding: 5px; background: -moz-linear-gradient(bottom, #FFECEC 0%, #D9FFD9 100%);">le
montage</div>
A l'intérieur, 4 images et un texte qui ont chacun leur animation particulière, pas trop en mouvement mais en sychronisation et, pour cela, je vais faire un petit shéma qui devrait faciliter
les réglage:
Le code d'une image
<img class="truc" src="http://www.terragalleria.com/images/mexico/mexi32014.jpeg" style="width: 200px; margin: 50px 0px 0px 70px; border-radius: 100px;" />
On y retrouve l'adresse http de l'image avec le nom (truc) qui lui ai donné afin d'y associer des animations particulières; sa largeur; son positionnement dans la boite (margin); les angles
arrondis (border-radius).
Le code de l'animation est:
<style type="text/css"><!--
.truc {
-moz-animation:prem 30s linear 0.1s infinite normal;
}
@-moz-keyframes prem
{
0% {border-radius: 90px; opacity:0.1; -moz-transform:translate(0px,0px) scale(1);}
5% {border-radius: 0px; opacity:1; -moz-transform:translate(150px,110px) scale(2.5);}
18% {border-radius: 0px; opacity:1; -moz-transform:translate(150px,110px) scale(2.5);}
21% {border-radius: 90px; opacity:0.1; -moz-transform:translate(0px,0px) scale(1);}
100% {border-radius: 90px; opacity:0.1; -moz-transform:translate(0px,0px) scale(1);}
}
--></style>
La première ligne de code indique que le programme doit suivre ces paramètres CSS et non ceux habituels.
La seconde indique le nom de l'image concernée par cette animation.
La troisième ligne regroupe les paramètres généraux de l'animations: son nom: "prem"; sa durée 30", son évolution linéaire, son démarrage au bout de 0.1 seconde, son fonctionnement infini et
pas d'aller-retour de l'animation: elle va au bout et ne bouge plus avant la fin de l'animation (ici:30 ").
La ligne avec l'arobase en tête défini l'évolution du mouvement dans le temps, donc par rapport aux 30" totales; comme nous allons faire enchaîner les mouvements, il faut régler le mouvement de
chacune des images qui montera et descendra avant une autre et après une autre.
Ici, j'utilise le % de 30" et j'ignore si on peut travailler avec les secondes directement .. à suivre ! Et c'est là que mon petit schéma va devenir utile !
...
