Effet de parallaxe simple en jQuery

Source: http://callmenick.com/post/advanced-parallax-scrolling-effect

by oilvier

HTML

<div class="parallax">
    <div class="test"></div>
</div>
<br><br><br>
<div class="parallax">
    
</div>

CSS

* {margin:0; padding:0;}
*, *:before, *:after {box-sizing:border-box;}
body {height:1500px;}
div {position: relative; border:1px solid red;
    width: 100%;
    background-size:cover;
padding-top: 70px;
padding-bottom: 75px;
height: 320px; overflow: hidden;}
.test {position: absolute; top:0; right:0; bottom:0; left:0; background:transparent url("http://192.168.42.101/aexae/1/www/public/images/bgd_comete.jpg") no-repeat center center;}

JavaScript

// On ne peut pas utiliser `background-attachment:fixed;` car il y a un bug lorsque l'on utilise cette propriété sur une image en `background-size:cover;`

var parallax = $('.parallax .test'),
    speed = 0.5;

 $(window).scroll(function(){
 	parallax.each(function() {
    	var windowYOffset 	= window.pageYOffset,
            elBackgrounPos 	= "50% " + (windowYOffset * speed) + "px",
        	test 	= (windowYOffset * speed) + "px";
       $(this).css({
			"transform": "translate(0, " + test +")"
		});
    });
 });