Bonjour,
j'utilise javascript pour faire une animation lors de l'affichage de mes elements, alors j'ai utilisé une fonction "estVisible" qui determine si un element est visible sur la zone vue sur l'ecran. et l'animation consiste à changer l'opacity=0 devient opacity=1.

style.css
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
.d2{
font-family:'Segoe UI';
font-SIZE: 16px;
color:#F2F9F7;
float:right;
margin-right:80px;
margin-top: 120px;
opacity:0;
}
.d3{
font-family:'Segoe UI';
font-SIZE: 16px;
color:#F2F9F7;
 
margin-left:200px;
margin-top: 100px;
opacity:0;
}
.d4{
font-family:'Segoe UI';
font-SIZE: 16px;
color:#F2F9F7;
opacity:0;
margin-left:400px;
margin-top: 150px;
}
 
.d5{
font-family:'Segoe UI';
font-SIZE: 16px;
color:#F2F9F7;
opacity:0;
margin-left:600px;
margin-top: 90px;
}
Index.html
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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

<div id="d2" class="d2" rel="380">Etude de besoin </div>
<div id="d3" class="d3" rel="330">Le choix de technologie convenable, plateforme et resource </div>
<div id="d4" class="d4" rel="370">Creation de proposition pérsonnalisée</div>
<div id="d5" class="d5" rel="370">Shake hands!</div>




<script>

document.onscroll=function(){estVisible('d2')};
document.onscroll=function(){estVisible('d3')};
document.onscroll=function(){estVisible('d4')};
document.onscroll=function(){estVisible('d5')};

function estVisible(id_element){
	var cadreVisible = {xMin: 0, xMax: 0, yMin: 0, yMax: 0}, elementVisible = {xMin: 0, xMax: 0, yMin: 0, yMax: 0};
	var source = document.getElementById(id_element), sourceParent = source.offsetParent;
	var total = {hauteur: false, largeur: false}, partiel = {hauteur: false, largeur: false};
	cadreVisible.xMin = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft;
	cadreVisible.xMax = window.pageXOffset + window.innerWidth || document.documentElement.scrollLeft + document.documentElement.clientWidth || document.body.scrollLeft + document.body.clientWidth;
	cadreVisible.yMin = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
	cadreVisible.yMax = window.pageYOffset + window.innerHeight || document.documentElement.scrollTop + document.documentElement.clientHeight || document.body.scrollTop + document.body.clientHeight;
	elementVisible.xMin = source.offsetLeft;
	elementVisible.yMin = source.offsetTop;
	while(sourceParent) {
		elementVisible.xMin += sourceParent.offsetLeft;
		elementVisible.yMin += sourceParent.offsetTop;
		sourceParent = sourceParent.offsetParent;
	}
	elementVisible.xMax = elementVisible.xMin + source.offsetWidth;
	elementVisible.yMax = elementVisible.yMin + source.offsetHeight;
	if(cadreVisible.xMin <= elementVisible.xMin && cadreVisible.xMax >= elementVisible.xMax){
		total.largeur = true;
	}
	if(cadreVisible.yMin <= elementVisible.yMin && cadreVisible.yMax >= elementVisible.yMax){
		total.hauteur = true;
		
	}
	
	if(total.largeur && total.hauteur){
	source.style.opacity=1
			setTimeout(function(){source.style.opacity=1}, 500);
		
		return(id_element + ' est entièrement visible dans la page !');
	}
	else{
		return(id_element + ' n\'est pas visible dans la page !');
	}
}

	


</script>
Mais le problème c'est que le changement ou le script s'applique juste sur le dernier élément 'd5' (shake hand).
alors qui a une solution pour ce problème?
et merci d'avance