jjmontalban/Page Tilt Effect.markdown

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
	<link href="http://fonts.googleapis.com/css?family=Architects+Daughter" rel="stylesheet" />
	<link rel="stylesheet" type="text/css" href="style.css">
	<script type="text/javascript" src="script.js"></script>
</head>
<body>

<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>
		</div>
	</div>
</div>

</body>
</html>

## Page Tilt Effect.markdown

      
    Raw
  

              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" />
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
	<link href="http://fonts.googleapis.com/css?family=Architects+Daughter" rel="stylesheet" />
	<link rel="stylesheet" type="text/css" href="style.css">
	<script type="text/javascript" src="script.js"></script>
	</head>
	<body>

	<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>
	</div>
	</div>
	</div>

	</body>
	</html>
	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();
	$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); }
	}