GOOCODE - Find your code/scripts

3 This is a cool photo wall display of results, combined with a lot of photos fade, rotate, zoom, tilt and 3D effects, quick photo from the left to cut, do rotate the 3D effect, and finally lined up in the photo on the wall, in order to show users cool photo wall display effect.


HTML
In this paper we use examples to share cool photo wall effect that depend on jQuery and the easing plug-in, first loading the two files.

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

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

<div class="grid"></div> 
<div class="animate">Click to see effect</div> 

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

.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 page.

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, 50 pictures done with varying degrees of deformation scaling transformation fading because you want to punch the next photo wall, and when these actions completed, began to cut into the wall photo animation, called storm () function.

var d = 0; //delay
var ry, tz, s; //transform params

//animation time
$(".animate").on("click", function(){
	//fading out the thumbnails with style
	$("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(){
		//after *promising* and *doing* the fadeout animation we will bring the images back
		storm();
	})
})

Custom functions storm () will be completed each photo and Z-axis rotation angle displacement movement, such that a combination of CSS3 3D effects, and then call the easing achieve the cushioning effect, so that the whole picture is very smooth walls cut, 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' 
        }) 
    }) 
}