Simple vertigo effect

index.html

<div id="contaianer">
		<section id="wrapper">
			<div class="p1" data-speed="0.01" data-revert="true"></div>
			<div class="p2" data-speed="0.02"></div>
			<div class="p3" data-speed="0.01"></div>
			<div class="letra" data-speed="0">vertigo</div>
		</section>
	</div>

script.js

$('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)});
			
		});
		
	});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.15.0/TweenMax.min.js"></script>

simple-vertigo-effect.markdown

Simple vertigo effect

God bless GSAP.

A Pen by Renan C. Araujo on CodePen.

License.

style.less

@import 'lesshat';
#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%;
	.transform(translate(-50%, -50%));
	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;
	
}
.letra{
	font-weight: 900;
	color: #24395A;
	font-size: 280/16em;
	top: 30%;
	margin-top: -115px;
	width: 100%;
	text-align: center;
	z-index: 7;
	text-transform: uppercase;
}

styles

<link href="https://fonts.googleapis.com/css?family=Lato:400,900" rel="stylesheet" />