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 html : 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
<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 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
#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;
	}