图片/图形

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)

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

阿里云

热评文章

发表评论

嘿,欢迎咨询!