Animation en CSS

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

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, 21h27

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, 22h00

Merci mais le navigateur bug à la fermeture avec le code

**Auteur** · 13/02/2008, 00h45

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