A-A+

基于jquery超酷的照片墙展示效果

2016年01月12日 web前端设计 暂无评论 阅读 6 views 次

照片墙效果我们相信各位在一些网站会看到得,像大一点的社交网站就会有照片墙的功能了,下面我们来看一外基于jquery超酷的照片墙展示效果的实现例子,具体如下。

这是一个超酷的照片墙展示效果,很多照片结合淡入淡出、旋转、缩放、倾斜及3D效果,照片快速从左侧切入,做旋转3D效果,最后在照片墙上整齐排列,为用户展示了超酷的照片墙展示效果。

本文结合实例给大家分享超酷的照片墙效果,该效果依赖jQuery和easing插件,因此首先载入这两个文件。

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

接着,我们在需要展示照片墙的位置放置如下代码:

  1. <div class="grid"></div>   
  2. <div class="animate">点击看效果</div>   

CSS

CSS定义了照片墙基本样式,照片排列以及按钮样式。

  1. .grid {   
  2.     width600pxheight300pxmargin100px auto 50px auto;   
  3.     perspective: 500px/*For 3d*/   
  4. }   
  5. .grid img {width60pxheight60pxdisplayblockfloatleft;}   
  6.    
  7. .animate {   
  8.     text-transformuppercase;   
  9.     backgroundrgb(0, 100, 0); colorwhite;   
  10.     padding10px 20pxborder-radius: 5px;   
  11.     cursorpointer;margin:10px auto;width:100px;text-align:center;   
  12. }   
  13. .animate:hover {backgroundrgb(0, 75, 0);}  

JS

首先我们在页面上动态载入50张照片,照片源来自网络。

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

当点击按钮时,50张图片做不同程度的变形缩放转换淡出效果,因为要切入下一个照片墙了,当这些动作全部完成时,开始切入照片墙动画效果,调用了storm()函数。

  1. var d = 0; //延时   
  2. var ry, tz, s; //定义转换参数   
  3.    
  4. $(".animate").on("click"function(){   
  5.     $("img").each(function(){   
  6.         d = Math.random()*1000; //1ms to 1000ms delay   
  7.         $(this).delay(d).animate({opacity: 0}, {   
  8.             step: function(n){   
  9.                 s = 1-n; //scale - will animate from 0 to 1   
  10.                 $(this).css("transform""scale("+s+")");   
  11.             },    
  12.             duration: 1000   
  13.         })   
  14.     }).promise().done(function(){   
  15.         storm(); //淡出效果全部完成时调用   
  16.     })   
  17. })  

自定义函数storm()完成了将每张照片进行角度旋转和Z轴位移动作,结合CSS3使得产生3D效果,然后调用easing实现缓冲效果,让整个照片墙切入十分流畅,请看代码:

  1. function storm(){   
  2.     $("img").each(function(){   
  3.         d = Math.random()*1000;   
  4.         $(this).delay(d).animate({opacity: 1}, {   
  5.             step: function(n){   
  6.                 //rotating the images on the Y axis from 360deg to 0deg   
  7.                 ry = (1-n)*360;   
  8.                 //translating the images from 1000px to 0px   
  9.                 tz = (1-n)*1000;   
  10.                 //applying the transformation   
  11.                 $(this).css("transform""rotateY("+ry+"deg) translateZ("+tz+"px)");   
  12.             },    
  13.             duration: 3000,    
  14.             easing: 'easeOutQuint'   
  15.         })   
  16.     })   
  17. }  
标签:

给我留言