un background qui défile ? - Page 1

Bonjour

J'ai une image qui se répète en background de mon Body
body { width: 100%; height: 100%; background-image:url('fond.png');}

et j'essaie de la faire défiler en boucle comme dans les menus de jeux vidéos.

J'ai créé ce javascript :

[source=js]
<script language="javascript" type="text/javascript">

DecalX = 0 ;
DecalY = 0 ;

SpeedX = 1.2 ;
SpeedY = 0.8 ;

TailleX = 465 ;
TailleY = 465 ;

function Bouge()
{

DecalX = DecalX + SpeedX ;
DecalY = DecalY + SpeedY ;

if ( DecalX > TailleX ) { DecalX = DecalX - TailleX ; }
if ( DecalY > TailleY ) { DecalY = DecalY - TailleY ; }

window.document.body.style.backgroundPosition = SpeedX + "px " + SpeedY + "px" ;

}

setInterval("Bouge()", 100 );

</script>
[/source]

Mais ça n'a aucun effet... Dites-moi où est mon erreur svp.

darkpig (./1) :
window.document.body.style.backgroundPosition = SpeedX + "px " + SpeedY + "px" ;

C'est pas DecalX et DecalY au lieu de SpeedX et SpeedY ?

Oui ! Cette erreur était si énorme que je ne la voyais pas.

Merci, ça fonctionne !

Par contre, c'est fluide dans IE mais ça rame dans Firefox... :\

(Ca fait quoi le JS, ça crée du HTML ?)

(Ca peut faire plein de choses... Là, en l'occurrence, ça modifie la propriété du CSS à la volée pour décaler l'image définie comme fond de page).

(Ok, merci )

Pour le problème de vitesse, tu peux peut-être essayer d'arrondir DecalX et DecalY en coordonnées entières avant de les utiliser ; je ne sais pas si ça joue ici, mais dans certains cas utiliser des coordonnées avec des chiffres après la virgule peut être assez lent.

Dis-moi tout, t'avais utilisé des chiffres à virgule pour la doc de TA ?

La doc de TA est web 1.0 compliant : c'est un gif animé

Mais quand on utilise des canvas, arrondir les coordonnées évite de passer dans un mode de rendu plus complexe à base de sous-pixels, et ça représente un gain non négligeable en perf. Je ne sais pas si c'est la même chose pour les images de background, mais ça coute pas cher à vérifier

En effet ça lag moins, merci du conseil.

en règle générale (et quelque soit le langage de programmation), quand on cherche à optimiser, il faut toujours préférer l'utilisation d'entiers plutôt que de flottants. ca accélère toujours les choses rien que pour les 4 opérations de base...

En l'occurrence c'est pas tellement le gain sur les opérations mathématiques qui est intéressant, mais le fait qu'avoir des coordonnées non-entières oblige le moteur de rendu à calculer la couleur de chaque pixel de l'image finale à partir de tous les pixels source qui sont à cheval dessus (et de leurs couvertures respectives), ce qui est bien plus coûteux que de faire simplement l'opération "1 pixel source -> 1 pixel rendu".

vi en effet, j'avais loupé ce point