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

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

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();