Bonjour,
J'ai testé le tuto : http://www.alsacreations.com/tuto/lire/1417-zoom-sur-effet-parallaxe.html[/url].
Mon problème c'est que je n'arrive pas à virer le saut d'image lors du scroll malgré l'explication donnée en bas du tutoriel. Je n'ai pas vu dans le css originel (tuto : http://ianlunn.co.uk/plugins/jquery-parallax/[/url] ) du tuto les -75..
J'ai rajouté une image pour faire le test comme avec la chaussure, et la bug, ma fraise en remontant disparait derrière progressivement mais pas en haut de l'écran.
J'ai testé le tuto : http://www.alsacreations.com/tuto/lire/1417-zoom-sur-effet-parallaxe.html[/url].
Mon problème c'est que je n'arrive pas à virer le saut d'image lors du scroll malgré l'explication donnée en bas du tutoriel. Je n'ai pas vu dans le css originel (tuto : http://ianlunn.co.uk/plugins/jquery-parallax/[/url] ) du tuto les -75..
J'ai rajouté une image pour faire le test comme avec la chaussure, et la bug, ma fraise en remontant disparait derrière progressivement mais pas en haut de l'écran.
<div id="slide1">
<div class="slide_inside">
<figure class="logo">
<img alt="logo Effet Parallaxe" src="images/logo-effet-parallaxe.png">
</figure>
<div class="fraise"></div>
<div class="texte-fraise">
<h2> Pourquoi manger des fraises ? </h2>
<p>Consommée dans le cadre d’une alimentation variée et équilibrée, riche en fruits et légumes, elle contribuerait à nous protéger
des maladies cardiovasculaires, des cancers, de l’obésité et du diabète.</p>
<p>La fraise est composée à près de 90% d’eau. Elle ne contient pratiquement pas de lipides ni de protéines et ne comporte que très
peu de glucides, ce qui en fait un fruit peu énergétique.</p>
<p>Ses glucides assurent l’essentiel de son apport calorique. Ils lui confèrent également sa saveur sucrée, une légère acidité étant
apportée par des acides organiques.</p>
<p>bla bla bla bla.. . </p>
</div>
</div>
</div>
<div id="slide2">
<div class="slide_inside">
<h2>Un titre de niveau 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a arcu rutrum, egestas diam vitae, gravida magna.
Proin porttitor turpis et leo dapibus, sit amet ornare turpis molestie. Sed tincidunt facilisis sem a suscipit.
In vehicula feugiat nunc, ac fermentum nunc porttitor a. Suspendisse et sapien nec mauris venenatis dignissim tincidunt id sem.
Ut sagittis neque a libero venenatis, sed viverra enim rhoncus. Donec lorem felis, consectetur in leo in, tempor vehicula neque.
</p>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Etiam ut mauris eu diam condimentum luctus.</li>
<li>Curabitur vel ligula commodo, posuere ipsum ac, rhoncus elit.</li>
<li>Duis sed nunc ut felis tincidunt pellentesque nec quis neque.</li>
</ul>
</div>
</div>
<div id="slide3">
<div class="slide_inside">
<h2> Crédits</h2>
<ul>
<li>Page de démonstration</li>
<li>Photos : <a target="_blank" href="http://fr.fotolia.com/">fotolia</a></li>
<li>Utilisation du script : <a target="_blank" href="http://www.alsacreations.com/tuto/lire/1417-zoom-sur-effet-parallaxe.html">jQuery-Parallax</a></li>
</ul>
</div>
</div>
$(document).ready(function(){
$('#slide1').parallax("center", 0, 0.1, true);
$('.logo').parallax("center", 0, 0.7, true);
$('.fraise').parallax("center", 1800, 0.5, true);
$('.texte_fraise').parallax("center", 0, 0.4, true);
$('#slide2').parallax("center", 900, 0.1, true);
$('#slide3').parallax("center", 2900, 0.1, true);
})
body {
margin:0;
padding:0;
color:#fff;
font : normal 90% "Trebuchet MS",Verdana,"Lucida Grande",Tahoma,Arial,Helvetica,Sans-Serif;
text-shadow : 0 -1px 0 rgba(0, 0, 0, 0.5);
}
h2 {
font-size: 2em;
font-weight:bold;
color: #b7db44;
}
a {
font-weight:bold;
color:#fff;
}
#slide1, #slide2, #slide3 {
height: 1000px;
padding-top:100px;
}
#slide1 {
background:url("./images/slide1.jpg") no-repeat fixed center 0 transparent;
overflow:hidden;
z-index:0;
}
figure.logo {
z-index:300;
position : absolute;
width: 980px;
margin: 0 auto;
padding: 0;
}
#slide1 .fraise {
background:url("./images/fraise1.png") no-repeat scroll center 0 transparent;
z-index:200;
position:absolute;
height:1000px;
width:550px;
margin-top:500px;
left: 5px;
}
#slide1 .texte-fraise {
float:right;
width: 450px;
text-align:left;
position:relative;
z-index:250;
margin-top:550px;
}
#slide2 {
background: url("./images/slide2.jpg") no-repeat fixed center 0 transparent;
z-index:500;
position:relative;
}
#slide3 {
background: url("./images/slide3.jpg") no-repeat fixed center 0 transparent;
}
.slide_inside {
width: 980px;
margin: 0 auto;
overflow:auto;
}
#slide1 .slide_inside {
text-align:center;
}
#slide2 .slide_inside p {
width: 500px;
text-align:justify;
}
#slide3 .slide_inside {
background-color: rgba(0, 0, 0, 0.5);
margin-top:50px;
padding:50px;
}
![upload/48809-bug1.jpg](upload/48809-bug1.jpg)