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)});
});
});
1 Response