Parallax Effect

HTML
<div id="contaianer"> <section id="wrapper"> <div class="p1" data-revert="true" data-speed="0.01"></div> <div class="p2" data-speed="0.02"></div> <div class="p3" data-speed="0.01"></div> <div class="word" data-speed="0"> explore </div> </section> </div>
LESS
#contaianer { position: absolute; width: 100vw; height: 100vh; top: 0; left: 0; background-color: #000; overflow: hidden; font-family: 'Lato', sans-serif; } #wrapper { overflow: hidden; position: absolute; width: 1500px; height: 800px; z-index: 10; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } #wrapper div { position: absolute; background-position: center center; background-size: cover; } .p1 { width: 1776px; height: 1183px; z-index: 6; background-image: url('//caraujo_pens.surge.sh/images/S6WCriT.jpg'); left: -89px; top: -191px; } .p2 { width: 927px; height: 854px; z-index: 8; background-image: url('//caraujo_pens.surge.sh/images/aeffA4C.png'); left: -83px; top: 169px; } .p3 { width: 1082px; height: 729px; z-index: 10; background-image: url('//caraujo_pens.surge.sh/images/QAyjA6B.png'); left: 718px; top: 136px; } .word { font-weight: 900; color: #24395A; font-size: 17.5em; top: 30%; margin-top: -115px; width: 100%; text-align: center; z-index: 7; text-transform: uppercase; }
JAVASCRIPT
$('html').mousemove(function(e){ var wx = $(window).width(); var wy = $(window).height(); var x = e.pageX - this.offsetLeft; var y = e.pageY - this.offsetTop; var newx = x - wx/2; var newy = y - wy/2; $('span').text(newx + ", " + newy); $('#wrapper div').each(function(){ var speed = $(this).attr('data-speed'); if($(this).attr('data-revert')) speed *= -1; TweenMax.to($(this), 1, {x: (1 - newx*speed), y: (1 - newy*speed)}); }); });
Expand for more options Login