Discussion :

[keokaz]

Bonjour a tous, j'aimerais savoir si il est possible de faire une animation de déplacement
vertical d'un fond d'écran.

le but serait que l'image du background monte de 30pixel et redescend de 30pixel et tout cela automatiquement, sans actionner quelque chose.

quel serait la meilleur mehode a suivre:

-c'est le background qui se déplace ?

-ou c'est juste une image qui contient un div qui doit se déplacer?

je ne sais par ou commencer, si quelqu'un a un exemple a me montrer.

merci d'avance pour votre réponse .

[keokaz]

finalement j'ai fini par trouver mon bonheur

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
 
 
       	<script type="text/javascript">
            /*
 * l'élément animé doit avoir une position et une taille de départ
 * déplace vers la droite de animationLength px en animationDelay/1000 s
 * puis déplace vers la gauche de  animationLength px en animationDelay/1000 s
 */
var animationLength = 400;
var animationDelay = 2000;
 
// la première animation
$("#vague")
	.animate({"bottom":"+=" + animationLength + "px"}, animationDelay)
	.animate({"bottom":"-=" + animationLength + "px"}, animationDelay);
 
// les animations suivantes
window.setInterval(function(){
	$("#vague")
		.animate({"bottom":"+=" + animationLength + "px"}, animationDelay)
		.animate({"bottom":"-=" + animationLength + "px"}, animationDelay);
}, (animationDelay * 2 + 10)); // 0.01s minimum de délai entre animation
 
 
            		$(function(){
			// l'élément animé doit avoir une position et une taille de départ
			// déplace vers la droite de 800px en 4s
			// puis déplace vers la gauche de 800px en 4s
			$("#vague").animate({"bottom":"+=20px"}, 2000).animate({"top":"-=20px"}, 2000);
		});
 
	</script>
 
 
  <img id="vague" src="wp-content/themes/keokod/image/vague.png" />