Parallax rekonstrukcija

by lovromar

HTML

<div id="bg">
    </div>
<div id="background-thing"></div>

CSS

#background-thing{ 
  background: url(http://www.manuelamisani.com/2014/port_css/../port_img/donan.png) no-repeat 0 0 scroll; 
  background-size: cover; 
  height:100%;


 /* min-width: 1024px; */

  position: absolute;

  width: 100%;
}


#bg {
    background-color: #333333;
    background-image: url("http://www.manuelamisani.com/2014/port_css/../port_img/sf.jpg");
    background-size: cover;

    position: absolute;
    width:100%;
    height:100%;
}


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

JavaScript

$('#background-thing').mousemove(function(e){
    
  var mousePos = (e.pageX/$(window).width())*100;
    
  $('#background-thing').css('backgroundPosition', mousePos+'% 0');

     var mousex = (e.pageX/(20))-1; 
				  $("#bg").css('backgroundPosition', mousex+'% 0');
});