27/10/2007
Fondu d'images CSS et Javascript
En voyant la page officielle de Starcraft 2, je me demandais comment ils avaient fait pour faire un diaporama en fondu, sans utiliser Flash.
En fait il s'agit tout simplement de l'utilisation de la propriété CSS "opacity" d'une image. Cet attribut peut prendre les valeurs décimales de 0 e 1: 1 étant la valeur pour une image opaque. Seule ombre au tableau étant que Internet Explorer 5 et 6 ne supportent pas cet attribut: Il faut passer par un filtre. Exemple avec 1, 0.7, 0.4, 0.1:
Au final en javascript on obtient le code suivant.
var img = document.getElementById("mon_id_image"); img.style.opacity=0.5; /* Par exemple */ img.style.filter=alpha(opacity=0.5*100);
Ou tout simplement en css le code suivant
img { opacity:0.5; filter:alpha(opacity=0.5); }
e noter que l'attribut filter opacity demande pour valeurs un de©cimal de 0 e 100, d'oe¹ le "*100".
Avec ce petit code, et un peu de patience, nous pouvons faire un fondu entre 2 images: Il faut pour cela superposer 2 images au meªme emplacement, et de©grader celles-ci.
Si je ne suis pas clair, rien de plus parlant qu'un bon exemple (cliquez sur les miniatures pour modifier l'image).