jQuery和CSS3图片展示动画特效


源码介绍

简要教程

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

使用方法

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

<link href="css/base.css" rel="stylesheet">  
<link href="css/demo.css" rel="stylesheet">  
<script type="text/javascript" src="js/jquery.min.js"></script>             
<script type="text/javascript" src="js/TweenMax.min.js"></script>             
<script type="text/javascript" src="js/ScrollMagi.min.js"></script>             
                
HTML

基本HTML结构如下:

<section class="page-wrapper effect-1st" id="coidea">
    <div class="grid">
      <div class="grid-item effect-first">
        <div class="image">
          <img src="assets/img/grid-item-1.jpg" />
          <div class="overlay"></div>
        </div>
        <div class="content">
          <h2>Fo check out<br>this magna</h2>
        </div>
      </div>
    </div>
</section>
                

jQuery和CSS3图片展示动画特效-1

jQuery和CSS3图片展示动画特效-2

该jQuery和CSS3图片展示动画特效的官方网址为:https://coidea.website/categories/challenges/inspiration-for-image-reveal-effects/



点赞(0) 打赏

立即下载

点击下载

评论列表 共有 0 条评论

暂无评论

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部