Cool Revealing Navigation with Page Tilt Effect Using jQuery and CSS3

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:

• Stylish Off-canvas Sidebar Menu with jQuery and CSS3

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.