effet Parallaxe inactif

**Antoinejdu44** · 21/10/2012, 20h31

Bonjour à tous,

Donc, voila, j'ai voulu me faire un portfolio et j'ai trouvé ce tuto bien sympa sur la parallaxe :

http://www.creativejuiz.fr/blog/tuto...ans-javascript

Donc, j'ai commencé à l'adapter à mes besoins ... et puis ça n'a pas marché pourtant le code est quasiment identique (j'ai seulement remplace le menu et les images ..)

L'effet n'est pas présent et la div slide_inside passe au dessus du menu ce qui n'est pas le cas dans le tuto ...

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
body {  
    margin: 0; padding: 0;  
    color: #fff;  
    background: #000;  
} 
 
#wrap {
	position: relative;  
    top: 0;
	-webkit-transition: top 1.4s  cubic-bezier(.49,.22,.52,1.35);
	-moz-transition: top 1.4s  cubic-bezier(.49,.22,.52,1.35);
	-o-transition: top 1.4s  cubic-bezier(.49,.22,.52,1.35);
	transition: top 1.4s  cubic-bezier(.49,.22,.52,1.35);
}
 
#menu {
	position: fixed;  
    top: 0; left: 0; right: 0;  
    padding: 0 0;  
    margin: 0; 
	text-align: center;  
    background: #000;
}
 
#slide1, #slide2, #slide3 {
	height: 1000px;  
    padding-top:240px;
	-webkit-transition: background-position 1.4s  cubic-bezier(.49,.22,.52,1.35);
	-moz-transition: background-position 1.4s  cubic-bezier(.49,.22,.52,1.35);
	-o-transition: background-position 1.4s  cubic-bezier(.49,.22,.52,1.35);
	transition: background-position 1.4s  cubic-bezier(.49,.22,.52,1.35);
 
}
 
#slide1 { 
	background:url("back.jpg") center 0 no-repeat fixed; 
	-webkit-background-size: cover; /* -Nom du moteur du navigateur-*/
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover; /*Background adaptable à l'user*/
}
 
#slide2 { 
	background:url("back_concert.jpg") center 0 no-repeat fixed; 
	-webkit-background-size: cover; /* -Nom du moteur du navigateur-*/
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover; /*Background adaptable à l'user*/
}
 
.slide_inside {  
    width: 1000px;
	height: 200px;  
    margin: 0 auto;  
    position: relative;  
    background-color: rgba(0, 0, 0, .6);  
    padding: 50px;  
}
 
#slide1.slide_inside {  
    text-align: justify;  
    background-color: transparent;
} 
 
#slide2.slide_inside {  
    text-align: justify;  /*qui ne fonctionne pas, mais pourquoi?*/
    background-color: transparent;
} 	
 
#s1:target ~ #wrap { top:0px; }
#s1:target ~ #wrap #slide1 { background-position: 50% 0%; }
#s1:target ~ #wrap #slide2 { background-position: 50% -35%; }
 
#s2:target ~ #wrap { top:-1000px; }
#s2:target ~ #wrap #slide1 { background-position: 50% 36%; }
#s2:target ~ #wrap #slide2 { background-position: 50% 0%; }

et le HTML

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
<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Portofolio - Antoine Julien</title>
    <link href="style.css" rel="stylesheet" type="text/css">
  </head>
 
  <body>
 
  <span id="s1"></span> 
  <span id="s2"></span>
 
    <div id="#wrap">
 
      <div id="menu">
        <img src="menu.png" width="1024" height="59" alt="Menu" usemap="#Menu_header" />
        <map name="Menu_header" id="map">
        	<area shape="rect" coords="75,10,230,38" href="#s2" alt="vers Concerts" />
        </map>
      </div>
 
 
 
      <div id="slide1">
        <div class="slide_inside">
 
        </div>
      </div>
 
 
 
       <div id="slide2">
        <div class="slide_inside">
 
        </div>
      </div>
 
    </div>
 
  </body>
</html>