网格动画效果

Question

我正在使用以下http://tympanus.net/Development/AnimatedResponsiveImageGrid/index3.html来显示图片网格。主要目的是通过淡入淡出随机交换图像。

唯一的缺点是没有加载效果，我觉得如果拇指可以在http://thecodeplayer.com/walkthrough/grid-animation-effects中制作动画会很酷，第二部分的风暴效果会是理想的，即使第一部分没有做。

或者最好的方法是使用后一个脚本，然后玩添加随机图像淡入淡出？

Answer 1

在您加入 jquery后，您需要添加jquery.easing.min.js。*。js

然后写下面的代码

$(document).ready(function(){
$("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, 
            //some easing fun. Comes from the jquery easing plugin.
            easing: 'easeOutQuint', 
        })
    })
});