Discussion :

[sorown]

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

[sekaijin]

C'et justement ce que tu demande :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

une simple question sur le code suivant que vaut la variable a à la fin du script

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
var a = 'd2';
a = 'd3';
a = 'd4';
a = 'd5'

je suppose que tu as la réponse. alors pourquoi document.onscroll se comporterait différemment ? c'est une variable comme une autre.
ce que tu veux faire c'est

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
document.onscroll=function(){
  estVisible('d2');
  estVisible('d3');
  estVisible('d4');
  estVisible('d5');
};

A+JYT