Parallax - Position des layers

Version imprimable

Bonjour, étant encore étudiante dans le domaine du webdesign et passionnée par les mmorpg je me suis proposée à ma guilde pour leur faire une bannière.
Aimant les défis j'ai décidée de faire la bannière en parallax. N'ayant pas encore beaucoup d’expérience dans le domaine du code j'ai besoin de vous face à mon problème.
Voici le problème, le parallax fonctionne mais tout les layers se retrouvent collé sur la gauche hors que je cherche à donner une position de départ à ceux ci.
Le résultat désiré : http://postimg.org/image/5v6fw8e0p/
Le résultat actuel : http://postimg.org/image/mufiy3n9h/

Je vous présente mon code:

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
<html>
	<head>
		<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
		<script type="text/javascript" src="js/jquery.jparallax.min.js"></script>
		<script type="text/javascript" src="js/jquery.event.frame.js"></script>
		<link rel="stylesheet" type="text/css" href="styles.css">
 
 
	</head>
	<body>
		<div id="parallax" class="clear">
			<img class="parallax-layer" src="images/ciel.png" style="width:1200px; height:537px;"/>
			<img class="parallax-layer" id="vaisseau" src="images/vaisseau.png" style="width:664px; height:537px;"/>
			<img class="parallax-layer" src="images/paysage.png" style="width:1106px; height:537px;"/>
			<img class="parallax-layer" src="images/perso.png" style="width:140px; height:537px;"/>
			<img class="parallax-layer" id ="logo" src="images/logo2.png" style="width:433px; height:537px;"/>
		</div>
		<script type="text/javascript">
                        jQuery(document).ready(function() 
                        {
                                $('#parallax .parallax-layer')
                                .parallax({
                                        mouseport: $('#parallax')
                                });
                        });
                </script>
	</body>
</html>

CSS

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#parallax-header { 
	height:200px; background-color:gray; 
 }
#parallax {
	position:relative; overflow:hidden; width:950px; height:537px;
	/* background-image:url('images/ciel.png'); */
}
.parallax-viewport {
	position: relative;     /* relative, absolute, fixed */
	overflow: hidden;
}
.parallax-layer {
	position: absolute;
}
#vaisseau { /* #vaisseau est un test afin de voir l'effet du margin et padding */
	padding-left:30px;
	}

Bonjour,
je dirais que si les images se placent à gauche au début c'est que tu a vraisemblablement un problème de CSS que ne prend pas en compte le plugin.

J'ai repris l'exemple qu'il y a sur cette page http://stephband.info/jparallax/, et un peu condensé

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
58
59
60
61
62
63
64
<!DOCTYPE html>
<html lang="en">
<head>
  <base href="http://stephband.info/jparallax/">
  <meta charset="utf-8" />
  <meta name="author" content="" />
  <meta name="description" content="" />
  <title>jQuery.parallax by stephband</title>
  <link rel="stylesheet" type="text/css" href="http://stephband.info/css/template.min.css" />
  <link rel="stylesheet" type="text/css" href="http://stephband.github.com/css/site.layout.css" />
  <link rel="stylesheet" type="text/css" href="http://stephband.github.com/css/docs.classes.css" />
  <link rel="stylesheet" href="css/jquery.parallax.css" />
  <style type="text/css" media="screen, projection">
    .parallax-viewport {
      width: 100%;
      max-width: 60em;
      height: 20em;
      background-color: #aebcc9;
    }
    .parallax-layer img{
      position:relative;  /*IMPORTANT pour les images, absolute ou relative d'ailleurs, sans positionnement cela ne marche pas*/
    }
  </style>
</head>
<body>
	<header class="site_header" id="page_header">
		<div class="site_wrap wrap">
			<a class="logo_thumb thumb" href="http://stephband.info" title="stephband" rel="index">
				<h1>stephband.info</h1>
			</a>
		</div>
	</header>
	<div class="site_wrap wrap">
    <h2>jquery.parallax</h2>
    <div class="parallax-viewport" id="parallax">
        <!-- parallax layers -->
        <div class="parallax-layer" style="width:860px; height:273px;">
            <img src="images/parallax_sketch/0_sun.png" alt="" style="left:300px; top:-12px;"/>
        </div>
        <div class="parallax-layer" style="width:920px; height:274px;">
            <img src="images/parallax_sketch/1_mountains.png" alt="" />
        </div>
        <div class="parallax-layer" style="width:1100px; height:284px;">
            <img src="images/parallax_sketch/2_hill.png" alt="" style="top:40px; left:0;" />
        </div>
        <div class="parallax-layer" style="width:1360px; height:320px;">
            <img src="images/parallax_sketch/3_wood.png" alt="" style="top:96px; left:0;"/>
        </div>
    </div>
 
  </div>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
  <script src="js/jquery.event.frame.js"></script>
  <script src="js/jquery.parallax.js"></script>
  <script>
  jQuery(document).ready(function(){
    jQuery('#parallax .parallax-layer')
    .parallax({
      mouseport: jQuery('#parallax')
    });
  });
  </script>
</body>
</html>

ce n'est pas exactement la structure que tu utilises mais j'ai quand même noté ceci

Code:

1
2
3
.parallax-layer img{
    position:relative;  /*IMPORTANT pour les images, absolute ou relative d'ailleurs, sans positionnement cela ne marche pas*/
}

15/06/2014, 20h32
pingooskn

Problème résolu, merci d'avoir aidé :)