-
Le problème
Voici l'animation que l'on peut obtenir avec un gif . C'est à peu près correct mis à part la taille qui reste importante.
Exemple de gif en taille maxi. ( 256 couleurs tramage : diffusion 100%) TAILLE 78.7Ko 
Maintenant une version allégée pour avoir une taille correcte, malheureux la qualité devient déplorable:
exemple de gif en basse définition (32 couleurs tramage aucun) TAILLE 20.9 Ko 
Pour finir la solution que je vous propose, elle est de petite taille identique à la précédente et visuellement elle est meilleure que la première animation.
Donc avec une grande prétention, que je vous annonce que c'est la meilleure ( en tout cas dans la situation présente):
Exemple avec un peu de javascript et un jpeg (Dim 240 * 780 en quatlité 30%) TAILLE 21 Ko
-
La solution
Elle est basée sur le principe des survol de bouton en CSS ( Voir un article sur ce sujet). Ici elle est un peu modifiée devenir une animation.
- Créer une image fixe avec X “sous-images” juxtaposées les unes aux autres.
Image composée avec plusieurs sous images 
- cette image est ensuite affichée dans un calque avec seulement la première sous-image visible.
<div id="banjava" style="
height:78px;
width:239px;
background-image: url('/alm/images/stories/tutoriaux/imagedefilante/banjava0.jpg');
background-position:0px 0%;">
</div>
- enfin on crée un script qui toutes les Y secondes fait monter l'image fixe jusqu'à la sous-image suivante et lorsque la fin de l'image fixe est atteinte, on remet l'image fixe au début
<script type="text/javascript"><!--
var haut = 0;
function banchg(){
if( haut < 699 ){
haut = haut-78;document.getElementById("banjava").style.backgroundPosition = "0px "+ haut +"px";
}
else{
document.getElementById("banjava").style.backgroundPosition = "0px 0px";haut = 0;
}
}
window.setInterval('banchg()', 2000);
--></script>
Voilà c'est tout... |
