Open sidebar menu code based on jquery tilt

Infinite loop animation effect based on jquery multiple images. This is a very useful jquery multi-image infinite loop animation effect plug-in. As follows:

Online preview Source Download

The implemented code.

HTML code:

<DivID= "Paper-back">       <nav>           <Divclass= "Close"></Div>           <ahref="#">Home</a>           <ahref="#">About Us</a>           <ahref="#">Our work</a>           <ahref="#">Contact</a>       </nav>   </Div>   <DivID= "Paper-window">       <DivID= "Paper-front">           <Divclass= "Hamburger"><span></span></Div>           <DivID= "Container">               < Section>                   <P>Click the button on the top left to open the menu</P>                   <P>Applicable browser: 360, FireFox, Chrome, Safari, Opera, Proud tour, Sogou, the window of the world.<BR>IE8 and the following browsers are not supported.</P>                   <P>                   <Scriptsrc= "/scripts/2bc/_gg_980_90.js"type= "Text/javascript"></Script></P>               </ Section>               < Section></ Section>           </Div>       </Div>   </Div>

JS Code:

varPapermenu ={$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 + '% '); }, Hamburgerfix:function(opening) {if(opening) {$ ('. Hamburger '). css ({position:' Absolute ', Top: This. $window. ScrollTop () + + ' 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 ();

Via:http://www.w2bc.com/article/jquery-left-lean-nav

Open sidebar menu code based on jquery tilt