具有多种特效的网格缩略图JS幻灯片

具有多种特效的网格缩略图JS幻灯片
 点击预览  点击下载

There are many parts of a website where we can apply nice transitions to make things more interesting. Images are certainly great entities for playing with fancy effects and today we'd like to show you some inspiration for thumbnail effects using CSS animations.

有一些网站的许多部分我们能应用漂亮的过渡效果,使他变得更有趣,图像玩奇特的效果,今天我们想告诉你一些灵感,使用CSS动画缩略图效果肯定是巨大的实体。

Today we’d like to share some fancy animations for thumbnails in a grid with you. There are many possibilities when it comes to these kind of effects, but not all of them fit well when applied to multiple items, like a grid of images. There is not much space and we have to consider the stacking order of the items for the effects to look nice. An interesting thing is that we can play with delays, intensifying the viewing pleasure of the whole thing. Not only can we apply the delays in order, but randomly or reversed.

今天我们想分享网格中的缩略图一些精美的动画给你。有很多的可能性时,这种影响,但不是所有的人都适合应用于多个项目,像一个网格的图像。没有太多的空间,我们已经考虑到好看的影响项目的堆叠顺序。有趣的是,我们可以玩的延误,加剧了整个事情的观赏乐趣。我们不仅可以应用于订单的延误,但随机或逆转。

The beautiful illustrations used in the demos are by talented Isaac Montemayor.
Please note that we’ve created a dummy script for navigating through the images. Needless to say, this is not a script for managing images.
In the demos we use an unordered list with images wrapped in an anchor. Depending on the class of the list, we’ll apply a certain effect. The next set of images will be inserted into the list items which means that we’ll have two anchors in one list item.
An example for an effect is the following “scale and rotate”. The active class will trigger the animations and the first anchor will disappear with the “scaleRotateOut” keyframes. The tt-empty is used to indicate if an item was previously empty. So in that case we don’t want this anchor to disappear:
  1. /* Scale and rotate */ 
  2. .tt-effect-scalerotate.tt-effect-active li:not(.tt-empty) a:first-child { 
  3.     animation: scaleRotateOut 0.6s forwards; 
The second, new anchor will appear with another animation. In case the item was empty, we don’t have a second child, but only one. So we need to cover these cases, too:
  1. .tt-effect-scalerotate.tt-effect-active li a:nth-child(2), 
  2. .tt-effect-scalerotate.tt-effect-active li.tt-empty a { 
  3.     opacity: 0
  4.     animation: scaleRotateIn 0.6s forwards; 
If there is a new anchor being added to an item, we just want to fade it out:
  1. .tt-effect-scalerotate.tt-effect-active li:not(.tt-empty) a:only-child { 
  2.     animation: fadeOut 0.6s forwards; 
For the effect to look nice, we don’t want the bottom row items to overlap the upper row ones, so we’ll set the right z-index for the first and second row:
  1. .tt-effect-scalerotate li:nth-child(-n+3) { z-index2; } /* order for correct overlapping */ 
  2. .tt-effect-scalerotate li:nth-last-child(-n+3) { z-index1; } 
And finally, we define the animations:
  1. @keyframes scaleRotateOut { 
  2.     100% { opacity: 0; transform: scale(0); } 
  3.   
  4. @keyframes scaleRotateIn { 
  5.     0% { opacity: 0; transform: translateX(50%) translateY(100%) rotate(25deg); } 
  6.     100% { visibilityvisible; opacity: 1; transform: translateX(0%) translateY(0%) rotate(0deg); } 
  7.   
  8. @keyframes fadeOut { 
  9.     from { opacity: 1; } 
  10.     to { opacity: 0; } 

转载请注明:代码家园 » 具有多种特效的网格缩略图JS幻灯片

评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)