Jquery-based ultra-cool photo wall display effect

Source: Internet
Author: User

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 '
})
})
}

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.