JS to achieve the cool picture wall display effect map with source download _javascript tips

This is a cool photo wall display effect, many photos combined fade, rotate, zoom, tilt and 3D effect, the photo quickly from the left cut, do rotate 3D effect, and finally on the photo wall neatly arranged, for users to display the cool photo wall display effect.

View Demo Download source code

Html

This article combines examples to share cool photo-wall effects, which rely on jquery and easing plug-ins, so first load the two files.

<script src= "Jquery.min.js" ></script> 

Next, we place the following code where we need to show the photo wall:

<div class= "Grid" ></div> 

Css

CSS defines the basic style of the photo wall, photo arrangement and button style.

. grid { 
  width:600px; height:300px; margin:100px auto 50px auto; 
  perspective:500px; /*for 3d*/ 
} 
. grid img {width:60px; height:60px; display:block; float:left;} 
 
. Animate { 
  text-transform:uppercase; 
  Background:rgb (0, 100, 0); Color:white; 
  padding:10px 20px; border-radius:5px; 
  cursor:pointer;margin:10px auto;width:100px;text-align:center; 
} 

Js

First we dynamically load 50 photos on the page, and the photo source comes from the network.

var images = "", Count = m; 
for (var i = 1; I <= count i++) 
  images + = '  '; 
   

When the button is clicked, 50 pictures do different degrees of deformation zoom conversion fade effect, because to cut into the next photo wall, when all of these actions complete, began to cut into the picture wall animation effect, called the Storm () function.

var d = 0; Delay 
var ry, TZ, S;//define Conversion parameters 
$ (". Animate"). On ("click", Function () { 
  $ (' img '). each (function () { 
    d = Math.random () *1000; 1ms to 1000ms delay 
    $ (this). Delay (d). Animate ({opacity:0}, { 
      step:function (n) { 
        s = 1-n;//scale-will anim Ate from 0 to 1 
        $ (this). CSS ("transform", "scale (" +s+ ")"), 
      }, 
      duration:1000 
    }). 
  Promise (). Done (function () { 
    storm ();//Fade effect when all complete 
  ) 

The Custom Function storm () completes the angle rotation and the z-axis displacement action of each photograph, combines the CSS3 to produce the 3D effect, then calls easing realizes the buffering effect, lets the entire picture wall cut into very smoothly, see the code:

Function Storm () { 
  $ ("img"). each (function () { 
    d = math.random () *1000; 
    $ (this). Delay (d). Animate ({opacity:1}, { 
      step:function (n) {//rotating "images on the" 
        Y axis from 360deg to 0DE G 
        ry = (1-n) *360; 
        Translating the images from 1000px to 0px 
        tz = (1-n) *1000; 
        Applying the transformation 
        $ (this). CSS ("transform", "Rotatey (" +ry+ "deg) Translatez (" +tz+ "px)"); 
      duration:3000, 
      easing: ' Easeoutquint ' 
    }) 
  }