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.

2

darkpig (./1) :
window.document.body.style.backgroundPosition = SpeedX + "px " + SpeedY + "px" ;
C'est pas DecalX et DecalY au lieu de SpeedX et SpeedY ? wink
avatar
Zeroblog

« Tout homme porte sur l'épaule gauche un singe et, sur l'épaule droite, un perroquet. » — Jean Cocteau
« Moi je cherche plus de logique non plus. C'est surement pour cela que j'apprécie les Ataris, ils sont aussi logiques que moi ! » — GT Turbo

3

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

Merci, ça fonctionne !

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

4

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

5

(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).
avatar

6

(Ok, merci hehe)

7

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.
avatar
All right. Keep doing whatever it is you think you're doing.
------------------------------------------
Besoin d'aide sur le site ? Essayez par ici :)

8

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

9

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

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 smile
avatar
All right. Keep doing whatever it is you think you're doing.
------------------------------------------
Besoin d'aide sur le site ? Essayez par ici :)

10

En effet ça lag moins, merci du conseil.

11

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...
Ancien pseudo : lolo

12

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".
avatar
All right. Keep doing whatever it is you think you're doing.
------------------------------------------
Besoin d'aide sur le site ? Essayez par ici :)

13

vi en effet, j'avais loupé ce point
Ancien pseudo : lolo