图片/图形

jQuery+CSS3图片展示动画特效

也想出现在这里?联系我们
创客主机


这是一款 jQuery 和 CSS3 图片展示动画特效。该特效使用 GSAP 和 ScrollMagic 来制作页面向下或向上滚动时的动画效果。

使用方法:

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

  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/TweenMax.min.js"></script>             
  5. <script type="text/javascript" src="js/ScrollMagi.min.js"></script>

HTML 代码:

基本 HTML 结构如下:

  1. <section class="page-wrapper effect-1st" id="coidea">
  2.     <div class="grid">
  3.       <div class="grid-item effect-first">
  4.         <div class="image">
  5.           <img src="assets/img/grid-item-1.jpg" />
  6.           <div class="overlay"></div>
  7.         </div>
  8.         <div class="content">
  9.           <h2>Fo check out<br>this magna</h2>
  10.         </div>
  11.       </div>
  12.     </div>
  13. </section>

官方网址:https://coidea.website/categories/challenges/inspiration-for-image-reveal-effects/

(0)

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

热评文章

发表评论

精彩推荐

Supro - 极简电商WordPress汉化主题

钻石珠宝奢侈品DedeCMS织梦模板

嘿,欢迎咨询!