Home>

Infinite loop animation effect based on jquery multiple pictures.This is a very useful jquery multi-picture infinite loop animation effects plug-in.

html code:

<div>
  <nav>
   <div></div>
   <a href="#">home</a>
   <a href="#"&about;about us</a>
   <a href="#"&our;our work</a>
   <a href="#">contact</a>
  </nav>
 </div>
 <div>
  <div>
   <div><span></span></div>
   <div>
    <section>
     <p>Click the button in the upper left corner to open the menu</p>
     <p>Applicable browsers:, firefox, chrome, safari, opera, Maxthon, Sogou, Window of the World.
 <br>Internet Explorer and below are not supported.
</p>
     <p>
     <script src="/scripts/bc/_gg __. Js" type="text/javascript"></script></p>
    </section>
    <section></section>
   </div>
  </div>
 </div>

js code:

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 ();
  • Previous Explain enum types in C ++ and how to declare new types
  • Next JQuery gets information from the background via AJAX to display on the table and supports row selection