implémentation du plugin "parallax"

**SpaceFrog** · 13/12/2011, 10h26

Bonjour,
Je me casse les dents depuis ce matin sur l'implémentation d'un plugin ...

Voici un code qui leeche les elements sur une page de démo :

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
       <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Nouvelle page 1</title>
<style type="text/css">
html, body {height:100%; width:100%;}
body {margin:0;
padding:0;
}
#parallax { position:absolute; 
			  overflow:hidden; 
			  width:600px; 
			  height:200px;
			}
#parallax li {position:relative;}			
 
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://webdev.stephband.info/js/jquery.jparallax.js" ></script>
<script type="text/javascript">
$(function(){
	$('#parallax').jparallax({});
})
</script>
</head>
<body>
<ul id="parallax">
	<li><img src="http://webdev.stephband.info/images/parallax_drops/0.png" alt="" style="width:978px; height:325px;"/></li>
	<li><img src="http://webdev.stephband.info/images/parallax_drops/1.png" alt="" style="width:987px; height:328px;"/></li>
	<li><img src="http://webdev.stephband.info/images/parallax_drops/2.png" alt="" style="width:1001px; height:333px;"/></li>
	<li><img src="http://webdev.stephband.info/images/parallax_drops/3.png" alt="" style="width:1031px; height:343px;"/></li>
	<li><img src="http://webdev.stephband.info/images/parallax_drops/4.png" alt="" style="width:1067px; height:355px;"/></li>
	<li><img src="http://webdev.stephband.info/images/parallax_drops/5.png" alt="" style="width:1120px; height:373px;"/></li>
	<li><img src="http://webdev.stephband.info/images/parallax_drops/6.png" alt="" style="width:1200px; height:400px;"/></li>
</ul>
</body>
 
</html>

La page de démo
http://webdev.stephband.info/parallax_demos.html

la page de démo fonctionne ...
pas la mienne ...

Pourquoi ?

A noter que le résultat est le même avec juste un div et des img ...

**SpaceFrog** · 13/12/2011, 12h02

Bon le responsable c'est la version de jquery !
en effet si je pointe sur la version hebregée utilisée par la démo

Code :

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

<script type="text/javascript" src="http://webdev.stephband.info/js/jquery-1.2.6.min.js"></script>

le code fonctionne

enfin presque ... souci de css sous IE
=> plugin bancale
je vais en trouver un autre

implémentation du plugin "parallax"

jQuery

Vue hybride

Partager

Partager