Effet simple parallax scroll

Bonjour,

Je souhaite réaliser un effet de parallax au scroll seulement sur une div, dans mon exemple j'ai exactement l'effet voulu, mais niveau code ce n'est pas encore ça.

J'ai fait ceci : http://jsfiddle.net/WbJDk/2/

Le probleme c'est que dans ma div single-post tous fonctionne avec le overflow:scroll;

Si je l'enleve, ça ne fonctionne plus , et ça ne m'enchante pas vraiment d'avoir 2 barres de scroll verticales ... Comment faire pour résoudre mon probleme ?

De plus mon conteneur est une balise article mais la finalité est que cette balise soit le body en fait , sauf que si je mets la balise body l'effet de parallax ne fonctionne plus ( en revanche je n'ai plus 2 barres de scroll verticales ^^).

En finalité la balise article représente mon body, la balise figure représente une div qui prend 100% de largeur (genre une bande de titre sous le header avec une image de fond) et la balise excerpt contient toutes les autres "bandes" de mon site genre des contenus, le footer etc ...

Je suis un peu bloqué j'ai pas l'habitude du js donc un peu d'aide serait cool ;)

Je mets le code au cas ou certain modifie mon code de base :

HTML :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<article class="single-post">	
    <figure>
        <img id="img" src="http://placekitten.com/g/800/400">
	</figure>
	<div class="excerpt">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lacinia pulvinar neque eget tincidunt. Cras sed dui a risus aliquam ultrices ut eget orci. Nunc mi tortor, feugiat eget elementum non, elementum eu metus. Nunc nec magna lorem. Morbi consequat tristique quam, a euismod turpis tincidunt non. Nam sodales suscipit tempor. Maecenas aliquet metus vel orci aliquam feugiat. Donec molestie sodales mi, eget commodo massa consectetur at. Duis lorem mauris, posuere id iaculis at, porttitor bibendum ante.</p>
 
        <p>Nam sit amet massa libero. Morbi quis purus enim. Morbi in imperdiet neque. Sed nulla est, laoreet sit amet eleifend egestas, commodo in sem. Maecenas nulla orci, convallis semper porttitor quis, sagittis id nulla. In congue pellentesque congue. Donec sed felis urna, sed porttitor nulla. Integer fermentum euismod faucibus. Vivamus commodo ipsum nec lectus pellentesque dignissim sit amet in tellus. Vestibulum aliquam sem at augue suscipit pulvinar. Fusce pretium euismod neque, eu blandit massa vulputate et.</p>
 
        <p>Aenean vel orci at libero consectetur porttitor ac vel nulla. Vivamus faucibus magna sit amet tortor gravida ac varius nisl mollis. Nunc scelerisque, est id pulvinar fermentum, est elit rutrum metus, ac convallis urna augue at est. Nunc ut leo arcu, sit amet suscipit magna. Cras aliquet turpis a odio viverra vel ornare arcu venenatis. Sed facilisis posuere leo at viverra. Duis sed erat non dui adipiscing faucibus. Proin dignissim nibh sed libero aliquet sed facilisis urna semper.</p>
 
        <p>Nam at urna vitae urna ultrices malesuada. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla a mauris erat. Nunc varius elementum eros, sed tempus erat ultrices id. Morbi non augue a sapien fringilla tristique et sit amet magna. Nullam nec lorem mauris, non commodo neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras eget eros nulla. Curabitur posuere viverra quam, vitae dignissim mi malesuada in. Ut dignissim lacus at mi convallis accumsan. Ut consectetur convallis velit, sit amet cursus mauris auctor eu. Suspendisse facilisis metus at nulla euismod ac eleifend augue ornare. Vivamus porta faucibus ligula, adipiscing sagittis dolor volutpat et. Quisque volutpat tristique lorem hendrerit interdum. Suspendisse pellentesque consequat condimentum. Etiam magna mauris, ultricies ac fringilla nec, tempor non metus.</p>
 
        <p>Aliquam ornare, metus vel accumsan egestas, justo felis varius erat, sed dignissim nisl mauris et nunc. Donec ac odio arcu, vitae ornare turpis. Nullam non diam eu nibh dapibus interdum. Duis vel laoreet velit. Proin blandit diam pharetra magna tristique nec luctus tortor molestie. Fusce elementum nisi vel elit sollicitudin dapibus. Integer malesuada consequat massa eu tempor. Cras ac nunc eu massa lacinia mollis. Ut elit tellus, posuere id vestibulum bibendum, elementum vel dui. Nullam ultrices erat quis massa egestas a hendrerit enim pellentesque. Sed posuere, magna nec commodo semper, quam lectus lacinia sem, at sollicitudin arcu nibh ut purus. Pellentesque ornare eleifend elementum. Mauris semper placerat lectus, quis elementum purus ultrices eu. Vestibulum vitae mi ac nisl pretium sodales.</p>
	</div>
</article>

CSS:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.single-post {
	position: relative;
	height: 100%;
	width: 100%;
	margin: 0 auto;
	overflow: scroll;
}
 
.single-post figure {
    margin: 0
}
 
.single-post figure img {
	position: absolute;
    width : 100%;
	top: 0;
}
 
.excerpt {
	position: relative;
	padding: 20px;
	background: #f7f7f7;
}

JAVASCRIPT:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
$(document).ready(function() {
 
    var _hauteurIMG = $("#img").outerHeight();
    $('.excerpt').css({"top":_hauteurIMG });
 
 
	$('.single-post').scroll(function() {
		var scroll = $('.single-post').scrollTop(),
			slowScroll = scroll/3;
		$('.single-post figure img').css({ transform: "translateY(" + slowScroll + "px)" });
	});
});