Js implements awesome photo wall display renderings with source code download and js source code download

Js implements the download of the awesome photo wall display source code and js source code

This is a cool photo wall display effect. Many photos are combined with fade-in and fade-out, rotation, scaling, skew, and 3D effects. The photos are quickly cut in from the left side for 3D Rotation, finally, they arranged neatly on the photo wall to show users the cool effect of the photo wall.

View demo download source code

HTML

This article uses examples to share with you the Cool photo wall effect. This effect depends on the jQuery and easing plug-ins. Therefore, first load the two files.

<script src="jquery.min.js"></script> <script src="jquery.easing.1.3.js"></script> 

Next, place the following code at the location where you want to display the photo wall:

<Div class = "grid"> </div> <div class = "animate"> click to view the effect </div>

CSS

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

.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. The photo source is from the network.

var images = "", count = 50; for(var i = 1; i <= count; i++)   images += '';    $(".grid").append(images); 

When you click the button, 50 images are converted to different degrees of deformation, scaling, and fade out effects, because you have to switch to the next photo wall. When all these actions are completed, you can start to cut in the photo wall animation effect, the storm () function is called.

Var d = 0; // delay var ry, tz, s; // define the conversion parameter $ (". animate "). on ("click", function () {$ ("img "). each (function () {d = Math. random () * 1000; // 1 ms to 1000 ms delay $ (this ). delay (d ). animate ({opacity: 0}, {step: function (n) {s = 1-n; // scale-will animate from 0 to 1 then (this).css ("transform ", "scale (" + s + ")") ;}, duration: 1000 })}). promise (). done (function () {storm (); // call when all fade-out effects are complete })})

The custom function storm () completes the rotation of the angle of each photo and the Z axis displacement action, combined with CSS3 to produce 3D effects, and then calls easing to achieve buffering effect, so that the entire photo wall can be smoothly cut in, 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 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'     })   }) }