基于jQuery倾斜打开侧边栏菜单特效代码分享

  <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>       <p>点击左上角的按钮打开菜单</p>       <p>适用浏览器：、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. <br>不支持IE及以下浏览器。</p>       <p>       <script src="/scripts/bc/_gg__.js" type="text/javascript"></script></p>      </section>      <section></section>     </div>    </div>   </div>    

  var paperMenu = {     $window: $('#paper-window'),     $paperFront: $('#paper-front'),     $hamburger: $('.hamburger'),     offset: ,     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 * ;      this.$paperFront.css('transform-origin', 'center ' + equation + '%');     },     hamburgerFix: function (opening) {      if (opening) {       $('.hamburger').css({        position: 'absolute',        top: this.$window.scrollTop() + + 'px'       });      } else {       setTimeout(function () {        $('.hamburger').css({         position: 'fixed',         top: 'px'        });       }, );      }     },     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();