js realizes super cool photo wall display renderings with source code download_javascript skills

This is a super cool photo wall display effect. Many photos are combined with fade, rotate, zoom, tilt and 3D effects. The photos are quickly cut from the left, rotated 3D effect, and finally arranged neatly on the photo wall. Users showed off cool photo wall display effects.

View demo Download source code

HTML

This article uses examples to share with you the cool photo wall effect. This effect relies on jQuery and easing plug-ins, so these two files are loaded first.

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

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

<div class="grid"></div> 
<div class="animate">点击看效果</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 sources are from the Internet.

var images = "", count = 50; 
for(var i = 1; i <= count; i++) 
  images += '<img src="http://thecodeplayer.com/u/uifaces/'+i+'.jpg" />'; 
   $(".grid").append(images); 

When the button is clicked, the 50 pictures undergo varying degrees of deformation, zoom, transition and fade-out effects because it is time to switch to the next photo wall. When all these actions are completed, the animation effect of the photo wall begins and the storm() function is called. .

var d = 0; //延时 
var ry, tz, s; //定义转换参数 
$(".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(); //淡出效果全部完成时调用 
  }) 
}) 

The custom function storm() completes the angular rotation and Z-axis displacement of each photo. It is combined with CSS3 to produce a 3D effect, and then calls easing to achieve the buffering effect, making the entire photo wall cut very smoothly. Please 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' 
    }) 
  }) 
}