Parallax primjer

by lovromar

HTML

<div id="content">
  <div class="pagina" id="div1" style="width: 2560px; height: 1027px;">
  	<div id="bg">
    </div>
    <div id="front">
    </div>
  </div>

</div>

CSS

#front {
    background-image: url("http://www.manuelamisani.com/2014/port_css/../port_img/donan.png");
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: cover;
    display: none;
    position: absolute;
    text-align: center;
}
#bg {
    background-color: #333333;
    background-image: url("http://www.manuelamisani.com/2014/port_css/../port_img/sf.jpg");
    background-size: cover;
    display: none;
    position: absolute;
}

body {
    background-color: #222525;
    background-position: center top;
    background-repeat: no-repeat;
    overflow: hidden;
    width: 100%;
}

JavaScript

$("#bg").delay( 800 ).fadeIn(3,function(){
		$("#front").delay( 800 ).fadeIn(1000,function(){
			$("#titolo").fadeTo("slow" ,1);
			var div=$("#titolo");
  			div.animate({top:'6%'},2000);
			var div2=$("#menu");
  				  div2.animate({top:'90%'},1000);
				  $("#titolo").fadeTo("slow" , 1);
				  $("#link1").fadeTo("slow" , 0.5);
				  $("#link2").fadeTo("slow" , 0.5);
			      $("#link3").fadeTo("slow" , 0.5);
				  $("#link4").fadeTo("slow" , 0.5);
				  $("#link5").fadeTo("slow" , 0.5);
			$("#titolo").fadeIn(2000,function(){
		    if ($(window).width()>641){
				$(".cornice").css({background:'#fff'});
				$(".cornice").fadeIn();
			}
			});
	});
				$(document).mousemove(function(event){
				  var mousex = (event.pageX/(20))-100; 
				  $("#bg").css({left: mousex});
				  $("#front").css({left: -mousex-100});
	});
	
	var windowWidth = $(window).width(); 
	var windowHeight = $(window).height();
	var windowWidthFrame = ($(window).width())-30; 
	var windowHeightFrame = ($(window).height())-30;

	var ux1inY = (windowHeight*3)-600; var ux1inX = -200;
	var ux2inY = (windowHeight*3)-500; var ux2inX = windowWidth-400;
	var ux3inY = (windowHeight*3)-1000; var ux3inX = windowWidth-400;
	var ux1outY = 4000; var ux1outX = -700;
	var ux2outY = 4000; var ux2outX = 2000;
	var ux3outY = 1000; var ux3outX = 2000;
	
	var ui1inY = (windowHeight*3)-700; var ui1inX = -000;
	var ui2inY = (windowHeight*3)-500; var ui2inX = windowWidth-400;
	var ui3inY = (windowHeight*3)-1000; var ui3inX = windowWidth-300;
	var ui1outY = 4000; var ui1outX = -700;
	var ui2outY = 4000; var ui2outX = 2000;
	var ui3outY = 1000; var ui3outX = 2000;
	
	var adv1inY = (windowHeight*3)-700; var adv1inX = -000;
	var adv2inY = (windowHeight*3)-500; var adv2inX = windowWidth-400;
	var adv3inY = (windowHeight*3)-1100; var adv3inX = windowWidth-400;
	var adv1outY = 4000; var adv1outX = -700;
	var adv2outY = 4000; var adv2outX = 2000;
	var adv3outY = 1000; var adv3outX = 2000;
	
	var img1inY =...