Parallax - Position des layers

**pingooskn** · 15/06/2014, 12h18

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;
	}

**NoSmoking** · 15/06/2014, 18h22

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 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
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 css :

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

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

**pingooskn** · 15/06/2014, 20h32

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

Parallax - Position des layers

jQuery

Vue hybride

Discussions similaires

Partager

Partager