11540 sujets

JavaScript, DOM et API Web HTML5

Parallaxe et background

Bonjours,

je me permets de poster car je m'arrache les cheveux depuis deux jours (pas en continu je vous rassure) sur l'effet parallaxe. Le tuto est pourtant clair mais je dois avoir un neurone qui flanche.

J'ai mon code HTML et CSS qui ressemble comme deux goûte d'eau au tuto avec trois background, sauf que les deux dernier background ne s'affiche pas. on peu les apercevoir a un moment précis quand on scroll ( à peu près au milieu du background) sinon on ne les voit pas.

Si quelqu'un peut éclairer ma lanterne afin de sauver mes cheveux.

Merci


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//FR">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Welcome</title>
<link rel="stylesheet" href="style.css">
</head>

<body>
<div id="slide1" >
<div class="slide_inside">
<figure>
<img src="image/logo.png" alt="logo Création"/>
</figure>
</div>
</div>
<div id="slide2" >
<<div class="slide_inside">
<figure>
<img src="image/pres.png" alt="présentation"/>
</figure>
</div>

<div id="upper" style="position:absolute; left:0px; top:1100px; width:1440px; height:1000px; z-index:1"><img name="" src="image/up.png" width="1440" height="1000" alt="">
</div>
</div>
<div id="slide3" >
<div class="slide_inside">
<figure>
<img src="image/next.png" alt="Poursuivre vers le site"/>
</figure>
</div>
</div>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

<script type="text/javascript" src="script/jquery.parallax.js"></script>
<script type="text/javascript">	
    $(document).ready(function(){		
        $('#slide1').parallax("center", 0, 0.4, true);
        $('#slide2').parallax("center", 900, 0.4, true);
        $('#slide3').parallax("center", 2900, 0.4, true);
    })
</script>
</body>







body {
  color:#FFFFFF;
  font-family:'Trebuchet MS', Verdana, 'Lucida Grande', Tahoma, Arial, Helvetica, sans-serif;
  font-size:90%;
  font-style:normal;
  font-variant:normal;
  font-weight:normal;
  line-height:normal;
  margin:0;
  padding:0;
  text-shadow:rgba(0, 0, 0, 0.498039) 0 -1px 0;
}
h2 {
  color:#B7DB44;
  font-size:2em;
  font-weight:bold;
}
a {
  color:#FFFFFF;
  font-weight:bold;
}
#slide1, #slide2, #slide3 {
  height:1000px;
  padding-top:100px;
 /*padding-right:100px;*/
}
#slide1 {
background-attachment:fixed;
  background-image:url(image/back1.jpg);
  background-position:50% 0;
  background-repeat:no-repeat no-repeat;

}
#slide2 {
background-attachment:fixed;
  background-image:url(image/back2.jpg);
  background-position:50% 0;
  background-repeat:no-repeat no-repeat;
}
#slide3 {
background-attachment:fixed;
  background-image:url(image/back3.jpg);
  background-position:50% 0;
  background-repeat:no-repeat no-repeat;
}
.slide_inside {
  margin:0 auto;

  width:980px;
}
#slide1 .slide_inside {
  text-align:center;

}
#slide2 .slide_inside p {
  text-align:justify;
  width:500px;
}

Modifié par Saumon (12 Mar 2013 - 16:00)
Salut,
Est que tu peux mettre ton code ?
Parce que comme ça, juste avec l’écrit , peu de personnes peuvent t'aider.
Tu auras beaucoup plus de réponse en postant ton code ou un lien vers ton site.
+++
Bonsoir,

Le mieux eut été une page en ligne Smiley cligne

Pas sûr qu'il faille répéter la valeur de la répétition du background :
background-repeat:no-repeat no-repeat;
ni que ce soit la cause de votre souci...(les propriétés raccourcies c'est bien Smiley cligne )

Une faute de frappe là ?
[b]<[/b]<div class="slide_inside">

C'est quoi donc ?
<div id="upper" style="position:absolute; left:0px; top:1100px; width:1440px; height:1000px; z-index:1"><img name="" src="image/up.png" width="1440" height="1000" alt="">
</div>
Ça fait une grosse image...

Bref, une page en ligne, c'est mieux Smiley smile
après moulte test j'ai enfin trouvé la solution (enfin je crois), c'était la version de jquery qui plantait le truc. Je suis passer de la 1.6.4 a la 1.2.1 et apparement ca marche
Sujet clos
Aller à