Animation et opacité

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:

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:

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