Discussion :

[bipbipman2003]

Bonjour,

j'ai utilisé le tutorial suivant pour faire un site avec un effet paralax jquery:
Cela fonctionne pas mal, mais il n'est pas tjs très ajusté car j'ai parfois un espace entre 2 images de fond si je redimensionne le navigateur.

http://www.ianlunn.co.uk/blog/code-t...orld-parallax/

Le point que je n'ai pas compris est le paramètre adjuster (ici 900 dans cet exemple):
je n'arrive pas a comprendre comment il est calculé dans l'exemple par rapport à la taille des images de fond ou des div.
Si quelqu'un a déjà utilisé cela ou a eu ce problème, merci:

Code :

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

1
2
3
if($firstBG.hasClass("inview")){
    $firstBG.css({'backgroundPosition': newPos(50, windowHeight, pos, 900, 0.3)});
}

Code :

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

1
2
3
4
5
6
7
8
9
10
11
	//function that is called for every pixel the user scrolls. Determines the position of the background
	/*arguments: 
		x = horizontal position of background
		windowHeight = height of the viewport
		pos = position of the scrollbar
		adjuster = adjust the position of the background
		inertia = how fast the background moves in relation to scrolling
	*/
	function newPos(x, windowHeight, pos, adjuster, inertia){
		return x + "% " + (-((windowHeight + pos) - adjuster) * inertia)  + "px";
	}

[bipbipman2003]

Par exemple le taille de son premier bg est de 600
Celle de son second est de 1300

Code css :

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
58
59
60
61
62
63
64
65
66
67
68
69
#header{
	background: white;
	height: 130px;	
}
 
#intro{
	background:url(images/firstBG.jpg) 50% 0 no-repeat fixed;
	color: white;
	height: 600px;
	margin: 0;
	padding: 160px 0 0 0;
}
 
#second{
	background: url(images/secondBG.jpg) 50% 0 no-repeat fixed;
	color: white;
	height: 1300px;
	margin: 0 auto;
	overflow: hidden;
	padding: 0;
}
 
 
#second .bg{
	background: url(images/trainers.png) 50% 0 no-repeat fixed;
	height: 1000px;
	margin: 0 auto;
	padding: 0;
	position: absolute;
	width: 900px;
	z-index: 200;
}
 
#third{
	background: url(images/thirdBG.jpg) 50% 0 no-repeat fixed;
	color: white;
	height: 650px;
	padding: 100px 0 0 0;	
}
 
#fourth{
	background: url(images/bubbles2.png), url(images/bubbles2.png), url(images/bubbles1.png), url(images/fourthBG.jpg);
	background-position: 50% 0, 50% 0, 50% 0, 50% 0;
	background-color: #036;
	background-attachment: fixed;
	background-repeat: repeat, repeat, repeat ,no-repeat;
	color: white;
	height: 1300px;
	padding: 100px 0 0 0;
}
 
#fifth{
	background: #ccc;
	height: 1000px;
	margin: 0 auto;
	padding: 40px 0 0 0;
}
 
.story{
	margin: 0 auto;
	min-width: 980px;
	width: 980px;
}
 
.story .float-left, .story .float-right{
	padding: 100px 0 0 0;
	position: relative;
	width: 350px;	
}

et je ne comprends pas les valeurs choisies pour le paramètre adjuster:
900 pour le premier: newPos(50, windowHeight, pos, 900, 0.3)...

Code javascript :

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
 
//function to be called whenever the window is scrolled or resized
	function Move(){ 
		var pos = $window.scrollTop(); //position of the scrollbar
 
		//if the first section is in view...
		if($firstBG.hasClass("inview")){
			//call the newPos function and change the background position
			$firstBG.css({'backgroundPosition': newPos(50, windowHeight, pos, 900, 0.3)}); 
		}
 
		//if the second section is in view...
		if($secondBG.hasClass("inview")){
			//call the newPos function and change the background position
			$secondBG.css({'backgroundPosition': newPos(50, windowHeight, pos, 1250, 0.3)});
			//call the newPos function and change the secnond background position
			trainers.css({'backgroundPosition': newPos(50, windowHeight, pos, 1900, 0.6)});
		}
 
		//if the third section is in view...
		if($thirdBG.hasClass("inview")){
			//call the newPos function and change the background position
			$thirdBG.css({'backgroundPosition': newPos(50, windowHeight, pos, 2850, 0.3)});
		}
 
		//if the fourth section is in view...
		if($fourthBG.hasClass("inview")){
			//call the newPos function and change the background position for CSS3 multiple backgrounds
			$fourthBG.css({'backgroundPosition': newPos(0, windowHeight, pos, 200, 0.9) + ", " + newPos(50, windowHeight, pos, 0, 0.7) + ", " + newPos(50, windowHeight, pos, 0, 0.5) + ", " + newPos(50, windowHeight, pos, 700, 0.3)});
		}
 
		$('#pixels').html(pos); //display the number of pixels scrolled at the bottom of the page
	}