Jquery-based ultra-cool photo wall display effect

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.

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>
<script src= "Jquery.easing.1.3.js" ></script>
Next, we place the following code where we need to show the photo wall:
<div class= "Grid" ></div>
<div class= "Animate" > click to see Effect </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;
}
. animate:hover {Background:rgb (0, 75, 0);}
Js

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

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

$ (". Grid"). Append (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; Defining Transformation 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 animate from 0 to 1
$ (this). CSS ("transform", "scale (" +s+ ")");
},
duration:1000
})
}). Promise (). Done (function () {
Storm (); Called when the fade effect is 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 the images on the y-axis axis from 360deg to 0deg
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 '
})
})
}