simple parallax on mousemove with jQuery
Forked from Marius Balaj's Pen Simple Parallax with jQuery.
A Pen by Secret Sam on CodePen.
<div class="scene"> | |
<div data-offset="90" class="clouds parallax"></div> | |
<div data-offset="30" class="trees parallax"></div> | |
<div data-offset="20" class="grass parallax"></div> | |
<div data-offset="50" class="buildings parallax"></div> | |
<div class="ground"></div> | |
</div> |
//Illustration by http://psdblast.com/flat-color-abstract-city-background-psd | |
$(window).on('mousemove', function(e) { | |
var w = $(window).width(); | |
var h = $(window).height(); | |
var offsetX = 0.5 - e.pageX / w; | |
var offsetY = 0.5 - e.pageY / h; | |
$(".parallax").each(function(i, el) { | |
var offset = parseInt($(el).data('offset')); | |
var translate = "translate3d(" + Math.round(offsetX * offset) + "px," + Math.round(offsetY * offset) + "px, 0px)"; | |
$(el).css({ | |
'-webkit-transform': translate, | |
'transform': translate, | |
'moz-transform': translate | |
}); | |
}); | |
}); |
simple parallax on mousemove with jQuery
Forked from Marius Balaj's Pen Simple Parallax with jQuery.
A Pen by Secret Sam on CodePen.
body { | |
background:#84dbd7; | |
overflow:hidden; | |
} | |
.scene { | |
position:absolute; | |
bottom:0; | |
left:0; | |
overflow:hidden; | |
right:0; | |
border-bottom:100px solid #342a2a; | |
height:800px; | |
} | |
.scene > div { | |
position:absolute; | |
bottom:0; | |
} | |
.ground { | |
width:100%; | |
height:30px; | |
background:#1d1818; | |
z-index:999; | |
} | |
.scene > div.clouds { | |
width:895px; | |
left:50%; | |
margin-left:-447px; | |
height:255px; | |
bottom:250px; | |
background:url(http://i.imgur.com/WYfbo0O.png) no-repeat center; | |
} | |
.scene div.trees { | |
width:908px; | |
height:174px; | |
background:url(http://i.imgur.com/4JOfJhg.png) no-repeat center; | |
z-index:100; | |
left:50%; | |
bottom:20px; | |
margin-left:-454px; | |
} | |
.scene div.grass { | |
width:964px; | |
height:37px; | |
z-index:200; | |
left:50%; | |
bottom:20px; | |
margin-left:-482px; | |
background:url(http://i.imgur.com/h0aXbZr.png) no-repeat center; | |
} | |
.buildings { | |
width:763px; | |
height:303px; | |
left:50%; | |
margin-left:-400px; | |
background:url(http://i.imgur.com/5LmAigM.png) no-repeat center; | |
} |