Page Tilt Effect

index.html

<div id="paper-back">
	<nav>
		<div class="close"></div>
		<a href="#">Home</a>
		<a href="#">About Us</a>
		<a href="#">Our Work</a>
		<a href="#">Contact</a>
	</nav>
</div>
<div id="paper-window">
	<div id="paper-front">
		<div class="hamburger"><span></span></div>
		<div id="container">
			<section>
				<h1>Page Tilt Menu Effect</h1>
				<p>Click the hamburger icon to see it in action</p>
			</section>
			<section></section>
			<section></section>
			<section></section>
		</div>
	</div>
</div>

Page Tilt Effect.markdown

Page Tilt Effect

Effect simulating a tilting sheet of paper to reveal the navigation menu

A Pen by Marco Fugaro on CodePen.

License.

script.js

var paperMenu = {
	$window: $('#paper-window'),
	$paperFront: $('#paper-front'),
	$hamburger: $('.hamburger'),
	offset: 1800,
	pageHeight: $('#paper-front').outerHeight(),
	
	open: function() {
		this.$window.addClass('tilt');
		this.$hamburger.off('click');
		$('#container, .hamburger').on('click', this.close.bind(this));
		this.hamburgerFix(true);
		console.log('opening...');
	},
	close: function() {
		this.$window.removeClass('tilt'); 
		$('#container, .hamburger').off('click');
		this.$hamburger.on('click', this.open.bind(this));
		this.hamburgerFix(false);
		console.log('closing...');
	},
	updateTransformOrigin: function() {
		scrollTop = this.$window.scrollTop();
		equation = (scrollTop + this.offset) / this.pageHeight * 100;
		this.$paperFront.css('transform-origin', 'center ' + equation + '%');
	},
	//hamburger icon fix to keep its position
	hamburgerFix: function(opening) {
			if(opening) {
				$('.hamburger').css({
					position: 'absolute',
					top: this.$window.scrollTop() + 30 + 'px'
				});
			} else {
				setTimeout(function() {
					$('.hamburger').css({
						position: 'fixed',
						top: '30px'
					});
				}, 300);
			}
		},
	bindEvents: function() {
		this.$hamburger.on('click', this.open.bind(this));
		$('.close').on('click', this.close.bind(this));
		this.$window.on('scroll', this.updateTransformOrigin.bind(this));
	},
	init: function() {
		this.bindEvents();
		this.updateTransformOrigin();
	},
};

paperMenu.init();

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

$primary-color: #243040;

body {
	font-family: 'Architects Daughter', sans-serif;
}

#paper-back {
	width: 100%;
	height: 100vh;
	background-color: $primary-color;
	position: fixed;
	top: 0;
	left: 0;
	font-size: 33px;
	nav {
		padding: 120px 34px;
		a {
			display: block;
			margin-bottom: 25px;
			text-decoration: none;
			color: rgba(white, 0.7);
		}
	}
}

//prevents the scrolling when the menu is open
#paper-window {
	height: 100vh;
	width: 100vw;
	position: relative; 
	overflow-x: hidden;
	overflow-y: scroll;
	z-index: 2;
	
	&.tilt {
		overflow: hidden;
		pointer-events: none;
		#paper-front { transform: rotate(10deg) translateZ(0); }
	}
}

//this is what actually rotates
#paper-front {
	pointer-events: auto;
	position: relative;
	z-index: 3;
	background-color: white;
	box-shadow: 0 0 20px rgba(black, 0.7);
	transform-origin: center 70%;
	transition: all 0.3s ease;
}

//actual content
#container {
	section {
		height: 600px;
		text-align: center;
		&:first-of-type {
			padding-top: 10vh;	
			h1 { font-size: 45px; }
			p { font-size: 25px; }
			@media (max-width: 600px) {
				padding-top: 15vh;	
				h1 { font-size: 30px; }
				p { font-size: 18px; }
			}
		}
		&:nth-of-type(2n) {
			background-color: lighten($primary-color, 75%);
		}
	}
}

.hamburger {
	position: fixed;
	z-index: 4;
	top: 30px;
	left: 30px;
	width: 45px;
	height: 34px;
	cursor: pointer;
	user-select: none;
	span {
		position: relative;
		
		&, &:before, &:after {
			display: block;
			width: 45px;
			height: 6px;
			background-color: $primary-color;
			border-radius: 2px;
		}
		
		&:before, &:after {
			content: '';
			position: absolute;
		}
		&:before { bottom: -14px; }
		&:after {	bottom: -28px; }
		
	}
}

.close {
	position: fixed;
	top: 30px;
	left: 30px;
	width: 45px;
	height: 34px;
	cursor: pointer;
	
	&:before, &:after {
			content: '';
			position: absolute;
			display: block;
			width: 45px;
			height: 6px;
			top: 50%;
			background-color: white;
			border-radius: 2px;
		}
		&:before { transform: translateY(-50%) rotate(45deg); }
		&:after {	transform: translateY(-50%) rotate(-45deg); }
}

styles

<link href="http://fonts.googleapis.com/css?family=Architects+Daughter" rel="stylesheet" />

Hi

How can use this amazing effect?

I tried but doesnt work. Whats wrong?

https://gist.github.com/jjmontalban/ab6fa9a30655456274b950160d63e2cb