Animation en CSS

Version imprimable

Animation en CSS

Bonjour,

J'aimerais bien créer un petit script qui affiche une boite qui "avance" sur l'écran.

Pour m'entrainer j'ai créer un petit script mais non seulement l'élement avance par "saccade" et ne s'arrete pas à 500px... si quelqu'un pouvait m'aider....
Code:

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 <style type="text/css"> #boite { height : 100px; width : 100px; background-color : red; position:absolute; left:50px; } </style> <script type="text/javascript"> function chargement() { var e = document.getElementById("boite"); for (var i = 0; i < 500; i++) { setInterval(function() {e.style.left = [i++]},500); } } </script> </head> <body onload="chargement();"> <div id="boite"> Boite ! </div>

Dans ton code tu incrémentes le i dans la boucle en plus de son incrément normal
Et puis ce ne serait pas un setInterval mais plutot un setTimeout dans la boucle

Code:

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
36
37
<style type="text/css">
#boite
	{
	height : 100px;
	width : 100px;
	background-color : red;
 
	position:absolute;
	left:50px;
	}		
</style>
 
 
<script type="text/javascript">	
function chargement()
	{
	var elt = document.getElementById("boite");
 
	var i=0;
	var Run=setInterval(function() {elt.style.left = 50+i*1+"px";
								i++;
								if(i>500){clearInterval(Run)}},100); 
		}
 
</script>
 
 
</head>
 
 
<body onload="chargement();">
 
 
<div id="boite">
Boite !
</div>
</body>

12/02/2008, 22h00
popy67

Merci mais le navigateur bug à la fermeture avec le code :?

bonjour,

popy67 : Si tu dois modifier des variables dans des fonctions exécutées par des timers, utilise des variables globales, c'est plus simple ;)

Code:

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
36
37
38
39
40
41
42
 
<html>
<head>
<title></title>
 <style type="text/css">
#boite
        {
        height : 100px;
        width : 100px;
        background-color : red;
        
        position:absolute;
        left:50px;
        }               
</style>
 
<script type="text/javascript">
var position = 50; // left: 50px; - position initiale
 
function chargement()
        {
        if (position>=500) //position > 500, on arrete
            return;
 
        position = position + 2; // pas de 2
 
        document.getElementById("boite").style.left = position  + "px";
                setTimeout("chargement()","50");
        }
</script>
</head>
 
<body onload="chargement();">
 
 
<div id="boite">
Boite !
</div>
 
</body>
 
</html>