Chapitre 5
Manipulation d'images
Retour Accueil CSS
37 Tourbillon de cartes aléatoire.
Termes CSS clés employés : transform:translate(), transform:rotate(), transform:scale3D().
Compatibilité navigateurs : IE10+, Firefox16+. Chrome et Safari avec le préfixe -webkit-.
Problématique
Réaliser un tourbillon de cartes allant de la gauche vers la droite, pivotant aléatoirement et diminuant graduellement de taille.
Résolution théorique
Problème analogue au précédent : une série d’images auxquelles on applique des transformations. Pour obtenir toutefois le côté aléatoire, il est nécessaire de recourir à un script.
Résolution pratique
Le code HTML est simplissime, si ce n’est qu’il comprend l’appel à un script dès la seconde carte :
<DIV>
<IMG src="adresse_carte">
<script language="JavaScript" type="text/javascript" src="tourbillon.js">
</script>
</DIV>
Il n’y a ici aucun code CSS particulier : la partie intéressante se trouve dans ce tout petit script. Il est effectué une boucle à 9 itérations, dans lesquelles sont définies à chaque fois deux variables aléatoires (les angles de rotation a et b). Les variables de modification de taille (c) et de translation (d et f) dépendant de la position de la carte concernée. Il est créé une variable Image, qui comprend la définition d’un élément IMG auquel est appliqué un style (les fameuses transformations), puis cette variable est injectée dans le document HTML
for (i=1;i<=9;i++)
{
a=Math.floor(Math.random()*360)
b=Math.floor(Math.random()*360)
c=1-0.07*i
d=5*i*i
f=2*i
Image="<IMG style=\"transform:translate(-"+d+"px,"+f+"px)
rotateX("+a+"deg) rotate("+b+"deg) scale("+c+","+c+") ;\"
src=\"adresse_carte\" border=1px>"
document.write(Image)
}
Autrement dit, ce script, enregistré ici sous le nom tourbillon.js, crée 9 éléments IMG du type :
<IMG style="transform:translate(-dpx,fpx) rotateX( adeg) rotate(bdeg) scale(c,c);" src="adresse_carte" border=1px>
Attention à bien renseigner l'adresse de l'image !
Tourbillon de cartes aléatoire
Chaque rafraîchissement de la page crée un nouveau tourbillon. En modifiant le mode de calcul des paramètres vous pourriez obtenir de nouveaux effets…
Retour Accueil CSS
|
|
|---|