图片/图形
超酷3D网格照片墙动画jQuery特效
PetitQ
这是一组效果非常炫酷的 jQuery 3D 网格照片墙动画特效。这组 3D 网格照片墙共 4 种不同的效果，它们都是使用 jQuery .delay()，jQuery easing 插件和 CSS3 动画过渡来在网格中制作缩略图的动画特效。该 3D 网格照片墙动画特效依赖于 jQuery easing 插件，在点击“animate”按钮之后，缩略图会随机消失，并带有波动效果。然后会以 3D 旋转的方式快速恢复到原来的位置上，效果非常炫酷。
HTML 结构
该 3D 网格照片墙动画特效的 HTML 结果非常简单：使用一个<div>作为网格容器，和一个按钮来触发动画效果。
也想出现在这里？联系我们吧
<div class="grid"></div>
<span class="animate">Animate</span>
CSS 样式
在网格容器上设置了固定的宽度和高度，为了制作 3D 效果，还设置了 perspective: 500px;。每一张图片也设置了固定的宽度和高度，并且均为左浮动。
* {margin: 0; padding: 0;}
body {text-align: center; /*overflow: hidden;*/}
.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 {
font: 12px Montserrat; text-transform: uppercase;
background: rgb(0, 100, 0); color: white;
padding: 10px 20px; border-radius: 5px;
cursor: pointer;
}.animate:hover {background: rgb(0, 75, 0);}
JavaScript
网格中的图片是在 js 代码中动态添加的。.animate 按钮上添加了 click 事件监听，在按钮被点击的时候，网格中的每一张图片都使用 jQuery.delay()函数来设置一个随机的延迟值，并使用 animate()动画来使图片的透明度降低为 0。接着在所有图片都消失之后，promise()方法返回一个 Promise 对象，用来观察当某种类型的所有行动绑定到集合，排队与否还是已经完成。最后在 done()方法中执行缩略图的 3D 旋转动画，类似龙卷风的效果。
var images = "", count = 50;
for(var i = 1; i <= count; i++)
images += '<img class="grid-image" src="img/'+i+'.jpg" />';
//图片添加到网格中$(".grid").append(images);
var d = 0; //延迟
var ry, tz, s; //转换参数
//animation time$(".animate").on("click", function(){
//fading out the thumbnails with style$("img.grid-image").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 backstorm();
})
})
//bringing back the images with stylefunction storm()
{$("img.grid-image").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 0degry = (1-n)*360;
//translating the images from 1000px to 0pxtz = (1-n)*1000;
//applying the transformation$(this).css("transform", "rotateY("+ry+"deg) translateZ("+tz+"px)");
},
duration: 3000,
easing: 'easeOutQuint',
})
})
}
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
