Animation en CSS

**popy67** · 12/02/2008, 19h51

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 :

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
<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>

**SpaceFrog** · 12/02/2008, 20h27

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 :

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
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>

**popy67** · 12/02/2008, 21h00

Merci mais le navigateur bug � la fermeture avec le code

**Auteur** · 12/02/2008, 23h45

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 html :

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
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>

Animation en CSS

JavaScript

Vue hybride

Discussions similaires

Partager

Partager