The introduction

This is a simple mobile phone album using Zepto.js +animate. CSS +canvas.

Use Zepto. Js

Zepto is a lightweight JavaScript library for modern advanced browsers that has a similar API to jquery. If you know how to use jquery, you know how to use Zepto. In this example, in addition to the default Zepto module (Zepto Event Ajax Form IE), the touch module is used, so you need to create Zepto manually.

Manual establishment method:

  1. Go to Zepto’s GitHub address and git your project
  2. Go to the Zepto directory and run the NPM command to install the modulenpm install
  3. Custom build Zepto modulesSET MODULES=zepto event ajax form ie touch
  4. Execute the commandnpm run-script dist, files such as zepto.js and zepto.min.js can be found in dist directory
  5. In an HTML filezepto.min.jsIt’s as easy to use as jquery

Use the Animate. CSS

An easy-to-use CSS animation cross-browser library. Use animate. CSS on your site by simply inserting a stylesheet into the document and adding a CSS class name (animation name) for the element that needs to be animated. That’s it! You have a CSS animation. You can go directly to this official website to see the animation effect.

Usage:

  1. Reference in HTMLanimate.min.css
  2. Add in the tag elementclassCan get the animation effect

Use the HTML 5 Canvas tag

The drawImage() method of Canvas is used to draw an Image on the canvas (canvas is used instead of Image), which triggers GPU rendering of the physical device to optimize the loading speed of the Image. HTML5 Canvas drawImage() Reference manual

Usage:

var imageObj=new Image(); // Create an Image object imageobj. index= I; // Set the image flag imageobj. onload=functionVar CVS =$(){var CVS =$('#cvs_'+this.index)[0].getContext('2d'); cvs.width=this.width; cvs.height=this.height; CVS. DrawImage (this, 0, 0, enclosing width, enclosing height); // Position the image on the canvas and specify the width and height of the image} imageobj.src =imgSrc; // Load the imageCopy the code

rendering

The actual operation is animated

The source code

Source code address github.com/kriswuwenxi…