图片/图形

网格图片随机动画展开jquery特效

创客主机


这是一款带随机展开动画特效的jquery网格图片布局。该图片网格布局中,每张图片带有一个阴影底色,当鼠标悬停在图片上面时,阴影底色会移动到图片下面。当点击了一副图片,该图片会全屏放大,其它图片则以随机动画的方式变小淡出。

使用方法:

在页面中引入base.css、demo.css和jquery、imagesloaded.pkgd.min.js、TweenMax.min文件。

  1. <link href="css/base.css" rel="stylesheet">  
  2. <link href="css/demo.css" rel="stylesheet">  
  3. <script type="text/javascript" src="js/jquery.min.js"></script>             
  4. <script type="text/javascript" src="js/imagesloaded.pkgd.min.js"></script>             
  5. <script type="text/javascript" src="js/TweenMax.min.js"></script>

HTML代码:

基本HTML结构如下:

  1. <div class="coidea-grid">
  2.   <figure
  3.     class="coidea-item"
  4.     data-headline="Our Custom Headline!"
  5.     data-excerpt="Our Custom Excerpt"
  6.     data-href="Our Custom Link"
  7.     data-image="path/to/our/custom/image.jpg">
  8.     <div class="coidea-item-inner"></div> 
  9.   </figure>
  10.   ...
  11.  
  12. </div>
  13.  
  14. <div class="coidea-activated-item">
  15.   <div class="coidea-background"></div>
  16.   <div class="coidea-close">
  17.     <span> <!-- close: text, icon oder image --> </span>
  18.   </div>
  19.   <div class="coidea-content">
  20.     <h4></h4>
  21.     <p></p>
  22.     <a href="#">discover more</a>
  23.   </div>
  24. </div>

官方网址:https://coidea.website/categories/challenges/expanding-grid-with-random-zoom-fade-out-animation/

(0)

本文由 创客云 作者:创客云 发表,转载请注明来源!

阿里云

热评文章

发表评论

嘿,欢迎咨询!