11499 sujets

JavaScript, DOM et API Web HTML5

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.

 <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