Jednoduchý jQuery Parallax efekt

Na Parallaxový efekt (rolujete stránkou dolů, ale určitý prvek roluje pomaleji => jede jinak) je mnoho řešení přez Javascript či jQuery, ale povětšinou jsou velmi robusní (velké datově). Existuje i jednoduché řešení jak tohoto efektu docílit.

//HTML cast



nějaký obsah

//CSS cast
.obsah_webu{
  position: relative;
  width: 728px;
  padding: 25px;
  margin: 15px auto;
}
.pozadi_webu{
	position:fixed;
	top:0; 
	left:0;
	background:url(obrazek_pozadi_webu.jpg) top center no-repeat; 
	height:100%; 
	width:100%; 
}
.obrazek_vlevo_od_webu{
	position:fixed;
	left:50%;
	width:250px; 
	height:187px;  
	margin-left:-600px;
	margin-top:400px;
	background:url(obrazek_vlevo_od_webu.png);
}
.obrazek_vpravo_od_webu{
	position:fixed;
	left:50%;
	width:300px;
	height:246px;
	margin-left:400px;
	margin-top:500px;
	background:url(obrazek_vpravo_od_webu.png);
}

//jQuery cast
$(document).ready(function(){
	$(window).bind('scroll',function(e){
   		parallaxScroll();
   	});
 
   	function parallaxScroll(){
   		var scrolledY = $(window).scrollTop();
		$('.pozadi_webu').css('background-position','center -'+((scrolledY*0.2))+'px'); //pomoci zmeny cisla menite rychlsot efektu
		$('.obrazek_vlevo_od_webu').css('top','-'+((scrolledY*0.5))+'px'); //pomoci zmeny cisla menite rychlsot efektu
		$('.obrazek_vpravo_od_webu').css('top','-'+((scrolledY*0.8))+'px');  //pomoci zmeny cisla menite rychlsot efektu
   	}
 
});

<< zpět