Discussion :

[sooprano]

bjr j'ai terminer la maquette de mon site perso (width=3345px; height=768px) et qui est de sorte d'une design intérieur d'une agence comme vous voyer ma maquette et plus large 3345 px en hauteur, alors je veux défiler ou naviguer horizontalement a partir du curseur cet effet existe en flash mais je veux le faire en jquery es ce qu'il y a un effet qui répond a mon besoin merci

http://www.webdesignerwall.com/demo/...=490&width=720

ce lien montre ce que je veux exactement merci

[scourjean]

Peut-être que l'un de ces deux là te conviendra, mais sinon c'est pas terrible ce qu'on trouve sur le net pour ce genre d'effet.

http://webdev.stephband.info/parallax.html

ou

http://www.shinyface.com/projects/parallax/

[sooprano]

Peut-être que l'un de ces deux là te conviendra, mais sinon c'est pas terrible ce qu'on trouve sur le net pour ce genre d'effet.

http://webdev.stephband.info/parallax.html

ou

http://www.shinyface.com/projects/parallax/

le premier lien ne marche pas, le deuxiem oui c'est presque ce que je veux faire, juste que le deuxième exemple montre défilement verticalement et horizontalement
et moi je veux que defilement horizontalement ainsi ce dernier dois etre souple j'en sais pas quoi faire voici le js de cet exemple

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
jQuery(document).ready(function($){
	$('#Parallax').mousemove(
		function(e){
			/* Work out mouse position */
			var offset = $(this).offset();
			var xPos = e.pageX - offset.left;
			var yPos = e.pageY - offset.top;
 
			/* Get percentage positions */
			var mouseXPercent = Math.round(xPos / $(this).width() * 100);
			var mouseYPercent = Math.round(yPos / $(this).height() * 100);
 
			/* Position Each Layer */
			$(this).children('img').each(
				function(){
					var diffX = $('#Parallax').width() - $(this).width();
					var diffY = $('#Parallax').height() - $(this).height();
 
					var myX = diffX * (mouseXPercent / 100); //) / 100) / 2;
 
 
					var myY = diffY * (mouseYPercent / 100);
 
 
					var cssObj = {
						'left': myX + 'px',
						'top': myY + 'px'
					}
					//$(this).css(cssObj);
					$(this).animate({left: myX, top: myY},{duration: 50, queue: false, easing: 'linear'});
 
				}
			);
 
		}
	);
});

[scourjean]

A la place de :

Code :

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

$(this).animate({left: myX, top: myY},{duration: 50, queue: false, easing: 'linear'});

Essaye ceci :

Code :

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

$(this).animate({left: myX},{duration: 50, queue: false, easing: 'linear'});

[ABCIWEB]

Une alternative sans jquery mais en javascript :

Si le fonctionnement de cet exemple te convient il te sera facile de l'adapter pour faire défiler ton image. Onmouseover sur l'image ça stop le défilement, et le bouton en bas du cadre inverse le sens de défilement (si défilement en cours). Tu as même un module pour tester directement sur le lien qui figure dans cet exemple.

[sooprano]

[quote=ABCIWEB;5584345]Une alternative sans jquery mais en javascript :

Si le fonctionnement de cet exemple te convient il te sera facile de l'adapter pour faire défiler ton image. Onmouseover sur l'image ça stop le défilement, et le bouton en bas du cadre inverse le sens de défilement (si défilement en cours). Tu as même un module pour tester directement sur le lien qui figure dans cet exemple.

salut, oui c'est presque ça, mais je veux configurer navigation droite ou gauche ça dépend mouvement du souris comme a cet exemple http://www.webdesignerwall.com/tutor...allax-gallery/

ou cet exemple

http://www.fatboy.fr/products/

c'est possible de realiser cet effet qui est en flash en jquery ?

[sooprano]

Une alternative sans jquery mais en javascript :

Si le fonctionnement de cet exemple te convient il te sera facile de l'adapter pour faire défiler ton image. Onmouseover sur l'image ça stop le défilement, et le bouton en bas du cadre inverse le sens de défilement (si défilement en cours). Tu as même un module pour tester directement sur le lien qui figure dans cet exemple.

j'arrive a adapter l'exemple que tu m'as donnée a mon besoin mais le probleme c'est que le defilement se fait automatiquement moi je veux au moment ou je change l'emplacement de souris, je dois calculer le x de mouse avec javascript mais comment en faire ?

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
<script type="text/javascript" src="js/fonction.js"></script>
<style type="text/css">
#contente{/*width:1348px;*/ width: auto; height:100%; position:absolute; top:0 ;  overflow: hidden;}
</style>
<div id="contente">
<div id="images_defilant"  onmouseover = "DF_ObjetNavigMous('images_defilant','over')"  onmouseout = "DF_ObjetNavigMous('images_defilant','out')">
<img src="images/accueil.jpg" width="3345" height="768" title="Bimbo 1" alt="Bimbo 1" style = "margin-left:-344px" />
 
</div>
</div>

fonction.js

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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
 
// JavaScript Document
 
 
function DF_ObjetDefilant(id,larg_d,mode,sens,vit,pos,b_esp,pause)
{
 
	this.DF_ObjetParam = typeof this.DF_ObjetParam == 'undefined' ? new Array() : this.DF_ObjetParam;	
	this.DF_ObjetParam[id] = typeof this.DF_ObjetParam[id] == 'undefined' ? new Array() : this.DF_ObjetParam[id];	
 
	if(typeof this.DF_ObjetParam[id]['id_defile'] == 'undefined') Set_param (id,larg_d,mode,sens,vit,pos,b_esp,pause);
 
	if (this.DF_ObjetParam[id]['largeur_def'] > 0 && this.DF_ObjetParam[id]['largeur_cadre'] > 0)
	{
		if (this.DF_ObjetParam[id]['mode'] == 'r') Boucle_ar(id); else Boucle_cont(id);
 
		this.DF_ObjetParam[id]['Timer'] = setTimeout(function(){DF_ObjetDefilant(id)},this.DF_ObjetParam[id]['delaicrnt']);	
	}
 
 
 
 
	function Set_param (id,larg_d,mode,sens,vit,pos,b_esp,pause) 
	{
 
	var id_d = null;
	var id_c = null;
 
	if(!(id_d = document.getElementById(id)))  id_d = null; else if(!(id_c = document.getElementById(id_d.parentNode.id))) id_c = null;
 
 
	if(id_c != null && id_d != null && id_d.hasChildNodes())
 
		{
			id_c.style.position = "relative";
 
			id_c.style.overflow = "hidden";
 
 
			id_d.style.position = "absolute";
 
			id_d.width = "auto";
 
 
			this.DF_ObjetParam[id]['largeur_def'] = id_d.offsetWidth;
 
			var div_defile = id_d.cloneNode(true);	
 
			var nb_noeud = id_c.childNodes.length;
 
			for (var i = 0; i < nb_noeud ; i++) id_c.removeChild(id_c.firstChild);
 
 
			var largeur_cadre = document.createElement("div");
 
			id_c.appendChild(largeur_cadre);	
 
			this.DF_ObjetParam[id]['largeur_cadre'] = largeur_cadre.offsetWidth;
 
			id_c.removeChild(id_c.firstChild);
 
 
			id_c.appendChild(div_defile);
 
 
			this.DF_ObjetParam[id]['id_defile'] = 	document.getElementById(id);
 
 
			this.DF_ObjetParam[id]['largeur_def'] = larg_d == 'auto' ? this.DF_ObjetParam[id]['largeur_def'] : parseInt(larg_d);
 
			this.DF_ObjetParam[id]['id_defile'].style.width = this.DF_ObjetParam[id]['largeur_def']+'px';			
 
			this.DF_ObjetParam[id]['mode'] = typeof mode != 'undefined' && (mode == 'r' || mode == 'b') ? mode : 'b';
 
			this.DF_ObjetParam[id]['sens_ini'] = typeof sens != 'undefined' && (sens == 'g' || sens == 'd') ? sens : 'g';
 
			this.DF_ObjetParam[id]['vitesse'] = typeof vit != 'undefined' && parseInt(vit) > 0 ? parseInt(vit) : 20;
 
			this.DF_ObjetParam[id]['psinit'] = typeof pos != 'undefined' && parseFloat(pos) > 0 ? parseFloat(pos) : 0;
 
			this.DF_ObjetParam[id]['b_esp'] = typeof b_esp != 'undefined' && parseFloat(b_esp) > 0 ? parseFloat(b_esp) : 0;		
 
			this.DF_ObjetParam[id]['pause'] = typeof pause != 'undefined' && parseInt(pause) > 0 ? parseInt(pause) : 0;
 
 
 
			this.DF_ObjetParam[id]['b_esp'] = this.DF_ObjetParam[id]['b_esp'] < 0  || this.DF_ObjetParam[id]['b_esp'] > 100 ? 0 : Math.ceil(this.DF_ObjetParam[id]['b_esp'] * this.DF_ObjetParam[id]['largeur_cadre']/100);
 
 
			this.DF_ObjetParam[id]['psinit'] = this.DF_ObjetParam[id]['psinit'] == 100 || this.DF_ObjetParam[id]['psinit'] < 0 || this.DF_ObjetParam[id]['psinit'] > 100 ? this.DF_ObjetParam[id]['largeur_cadre'] : Math.ceil(this.DF_ObjetParam[id]['psinit']*this.DF_ObjetParam[id]['largeur_cadre']/100);		
 
			this.DF_ObjetParam[id]['psinit'] = (this.DF_ObjetParam[id]['largeur_cadre'] > this.DF_ObjetParam[id]['largeur_def'] &&  this.DF_ObjetParam[id]['psinit'] == 0 ) ? this.DF_ObjetParam[id]['largeur_cadre'] - this.DF_ObjetParam[id]['largeur_def'] : this.DF_ObjetParam[id]['psinit'];
 
 
			this.DF_ObjetParam[id]['pscrnt'] = this.DF_ObjetParam[id]['psinit'];
 
			this.DF_ObjetParam[id]['sens'] = 1;
 
 
			this.DF_ObjetParam[id]['p_retour'] = this.DF_ObjetParam[id]['largeur_def'] >= this.DF_ObjetParam[id]['largeur_cadre'] ? this.DF_ObjetParam[id]['largeur_def'] - this.DF_ObjetParam[id]['largeur_cadre'] : 0;
 
 
			this.DF_ObjetParam[id]['largeur_def'] += this.DF_ObjetParam[id]['b_esp'];						
 
 
			this.DF_ObjetParam[id]['p_retour'] = this.DF_ObjetParam[id]['mode'] == 'b' ? this.DF_ObjetParam[id]['largeur_def'] : this.DF_ObjetParam[id]['p_retour'];
 
 
			if (this.DF_ObjetParam[id]['mode'] == 'r' && this.DF_ObjetParam[id]['largeur_def'] == this.DF_ObjetParam[id]['largeur_cadre'] && this.DF_ObjetParam[id]['psinit'] == 0) this.DF_ObjetParam[id]['largeur_def'] = 0;
 
 
			if (this.DF_ObjetParam[id]['largeur_def'] > 0 && this.DF_ObjetParam[id]['mode'] == 'b') Ajout_clone(id);
 
			id_c.style.visibility = "visible";
 
		}
	}
 
 
 
 
	function Ajout_clone(id) 
	{	   	
 
			   var div_contenu = document.createElement("div");
 
			   var nb_noeud = this.DF_ObjetParam[id]['id_defile'].childNodes.length;
 
			   for (var i = 0; i < nb_noeud ; i++) 
 
				   {				   
					div_contenu.appendChild(this.DF_ObjetParam[id]['id_defile'].firstChild.cloneNode(true));
					this.DF_ObjetParam[id]['id_defile'].removeChild(this.DF_ObjetParam[id]['id_defile'].firstChild);
				   }
 
 
			   if (this.DF_ObjetParam[id]['b_esp'] > 0)
 
				   {	   
					this.DF_ObjetParam[id]['sens_ini'] == 'g' ? div_contenu.style.marginRight = this.DF_ObjetParam[id]['b_esp']+'px' : div_contenu.style.marginLeft = this.DF_ObjetParam[id]['b_esp']+'px';   
				   }
 
			   div_contenu.style.display = "inline";
 
			   this.DF_ObjetParam[id]['id_defile'].appendChild(div_contenu.cloneNode(true));
 
			   var nb_clone = Math.ceil(this.DF_ObjetParam[id]['largeur_cadre']/(this.DF_ObjetParam[id]['largeur_def'])); 	
 
			   this.DF_ObjetParam[id]['id_defile'].style.width = ((nb_clone+1) * this.DF_ObjetParam[id]['largeur_def'])+'px';
 
			   for (var j = 0; j < nb_clone ; j++)
 
				   {	 
					this.DF_ObjetParam[id]['id_defile'].appendChild(this.DF_ObjetParam[id]['id_defile'].firstChild.cloneNode(true));    
				   }
	}
 
 
 
 
	function Boucle_cont(id)
	{
		this.DF_ObjetParam[id]['delaicrnt'] = this.DF_ObjetParam[id]['vitesse'];
		this.DF_ObjetParam[id]['inverse'] = 1;
 
 
		if(this.DF_ObjetParam[id]['pscrnt'] == - this.DF_ObjetParam[id]['p_retour'])
 
				{					
				this.DF_ObjetParam[id]['id_defile'].appendChild(this.DF_ObjetParam[id]['id_defile'].firstChild.cloneNode(true));  
				this.DF_ObjetParam[id]['id_defile'].removeChild(this.DF_ObjetParam[id]['id_defile'].firstChild); 
 
				this.DF_ObjetParam[id]['inverse'] = -1;
 
				this.DF_ObjetParam[id]['pscrnt'] = 0;
 
				this.DF_ObjetParam[id]['sens'] = -1;		
				}
 
				else
 
				{
				if(this.DF_ObjetParam[id]['pscrnt'] == this.DF_ObjetParam[id]['psinit'])
 
					{
					this.DF_ObjetParam[id]['sens'] *= -1;
					this.DF_ObjetParam[id]['delaicrnt'] = this.DF_ObjetParam[id]['pause']; 
					}
				}
 
 
			 this.DF_ObjetParam[id]['sens_ini'] == 'g' ? this.DF_ObjetParam[id]['id_defile'].style.left = this.DF_ObjetParam[id]['pscrnt']+"px" : this.DF_ObjetParam[id]['id_defile'].style.right = this.DF_ObjetParam[id]['pscrnt']+"px" ;
 
			this.DF_ObjetParam[id]['pscrnt'] += this.DF_ObjetParam[id]['sens']; 
 
	}
 
 
 
 
function Boucle_ar (id) 
	{
		this.DF_ObjetParam[id]['delaicrnt'] = this.DF_ObjetParam[id]['vitesse'];
		this.DF_ObjetParam[id]['inverse'] = 1;
 
		if(this.DF_ObjetParam[id]['pscrnt']  == - this.DF_ObjetParam[id]['p_retour'] || this.DF_ObjetParam[id]['pscrnt'] == this.DF_ObjetParam[id]['psinit'])
			{
			this.DF_ObjetParam[id]['inverse'] = -1;
			this.DF_ObjetParam[id]['delaicrnt'] = this.DF_ObjetParam[id]['pause']; 
			this.DF_ObjetParam[id]['sens'] *= -1;
			} 
 
		this.DF_ObjetParam[id]['sens_ini'] == 'g' ? this.DF_ObjetParam[id]['id_defile'].style.left = this.DF_ObjetParam[id]['pscrnt']+"px" : this.DF_ObjetParam[id]['id_defile'].style.right = this.DF_ObjetParam[id]['pscrnt']+"px" ;
 
		this.DF_ObjetParam[id]['pscrnt'] += this.DF_ObjetParam[id]['sens']; 
	}
 
}
 
 
 
 
function DF_ObjetNavigMous(id,etat) 
{
	if(typeof this.DF_ObjetParam != 'undefined' && typeof this.DF_ObjetParam[id] != 'undefined' && this.DF_ObjetParam[id]['id_defile'] != null && typeof this.DF_ObjetParam[id]['Timer'] == 'number') 
		{
		clearTimeout(this.DF_ObjetParam[id]['Timer']);
		if (etat == 'out') DF_ObjetDefilant(id);
		}
}
 
 
 
 
function DF_ObjetSensInverse(id) 
{
if(typeof this.DF_ObjetParam != 'undefined' && typeof this.DF_ObjetParam[id] != 'undefined' && this.DF_ObjetParam[id]['id_defile'] != null && typeof this.DF_ObjetParam[id]['Timer'] == 'number' && this.DF_ObjetParam[id]['inverse'] == 1 && !(this.DF_ObjetParam[id]['pscrnt']  == - this.DF_ObjetParam[id]['p_retour'] || this.DF_ObjetParam[id]['pscrnt'] == this.DF_ObjetParam[id]['psinit'])) this.DF_ObjetParam[id]['sens'] *= -1;	
}
 
 
 
 
function addLoad_DF_ObjetDefilant(func) {
 
		if (window.addEventListener)
        	{
      			window.addEventListener("load", func, false);
    		}
        else if (document.addEventListener)
        	{
      			document.addEventListener("load", func, false);
    		}
        else if (window.attachEvent)
        	{
      			window.attachEvent("onload", func);
    		}
}
 
-->
 
 
 
 
 
<!--
addLoad_DF_ObjetDefilant(function(){DF_ObjetDefilant('images_defilant','420','r','g','10','25','0','1500')});
addLoad_DF_ObjetDefilant(function(){DF_ObjetDefilant('texte_defilant','auto','b','g','15','100','50','250')});
-->

j'avoue j'ai rien compris ce script sauf qu'il fé defilement automatiquement de mon image et quand je survole et s'arrête , je veux remplacer ça par un défilement dépend de mouvement de souris horizontalement