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

Source: Internet
Author: User

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

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.