Cool Revealing Navigation with Page Tilt Effect Using jQuery and CSS3
File Size: | 3.33 KB |
---|---|
Views Total: | 6564 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
A cool jQuery navigation concept that uses CSS3 transitions and transforms to reveal an off-screen navigation menu with a page tilt effect.
See also:
How to use it:
1. Create the off-screen navigation menu that is hidden behind the main content on page load.
<div id="paper-back"> <nav> <div class="close"></div> <a href="#">Home</a> <a href="#">Works</a> <a href="#">Blog</a> <a href="#">Contact</a> <a href="#">About</a> </nav> </div>
2. Wrap the main content together with a hamburger menu toggle into the 'main-content' container
<div id="main-content"> <div id="content-front"> <div class="hamburger"><span></span></div> <div id="container"> Main Content Goes Here </div> </div> </div>
3. The main CSS styles for the navigation menu.
#navigation { width: 100%; height: 100vh; background-color: #243040; position: fixed; top: 0; left: 0; font-size: 33px; } #navigation nav { padding: 120px 34px; } #navigation nav a { display: block; margin-bottom: 25px; text-decoration: none; color: rgba(255, 255, 255, 0.7); } #main-content { height: 100vh; width: 100vw; position: relative; overflow-x: hidden; overflow-y: scroll; z-index: 2; } #main-content.tilt { overflow: hidden; pointer-events: none; } #main-content.tilt #content-front { -webkit-transform: rotate(10deg) translateZ(0); transform: rotate(10deg) translateZ(0); } #content-front { pointer-events: auto; position: relative; z-index: 3; background-color: white; box-shadow: 0 0 20px rgba(0, 0, 0, 0.7); -webkit-transform-origin: center 70%; -ms-transform-origin: center 70%; transform-origin: center 70%; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
4. The required CSS / CSS3 rules for the hamburger menu toggle.
.hamburger { position: fixed; z-index: 4; top: 30px; left: 30px; width: 45px; height: 34px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .hamburger span { position: relative; } .hamburger span, .hamburger span:before, .hamburger span:after { display: block; width: 45px; height: 6px; background-color: #243040; border-radius: 2px; } .hamburger span:before, .hamburger span:after { content: ''; position: absolute; } .hamburger span:before { bottom: -14px; } .hamburger span:after { bottom: -28px; } .close { position: fixed; top: 30px; left: 30px; width: 45px; height: 34px; cursor: pointer; } .close:before, .close:after { content: ''; position: absolute; display: block; width: 45px; height: 6px; top: 50%; background-color: white; border-radius: 2px; } .close:before { -webkit-transform: translateY(-50%) rotate(45deg); -ms-transform: translateY(-50%) rotate(45deg); transform: translateY(-50%) rotate(45deg); } .close:after { -webkit-transform: translateY(-50%) rotate(-45deg); -ms-transform: translateY(-50%) rotate(-45deg); transform: translateY(-50%) rotate(-45deg); }
5. Include the latest version of jQuery library at the bottom of your web page.
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
6. The core JavaScript.
var navigationMenu = { $window: $('#main-content'), $contentFront: $('#content-front'), $hamburger: $('.hamburger'), offset: 1800, pageHeight: $('#content-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.$contentFront.css('transform-origin', 'center ' + equation + '%'); }, 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(); } };
7. Initialize the navigation menu.
navigationMenu.init();
This awesome jQuery plugin is developed by marco_fugaro. For more Advanced Usages, please check the demo page or visit the official website.