css页面滚动触发动画

所属分类:UI,其他-滚动,动画效果

 100300  525  查看评论 (42)
分享到微信朋友圈
X
css页面滚动触发动画 ie兼容10

第一步引入:

<link rel="stylesheet" href="css/animate.css">

第二步:

给你的页面元素加上调用 “wow”

<div class="row">
    <div class="wow rollIn bg-blue"></div>
    <div class="wow bounceInDown bg-green">WOW.js</div>
    <div class="wow lightSpeedIn bg-purple"></div>
</div>

第三步:调用js

<script src="http://cdn.dowebok.com/131/js/wow.min.js"></script>
<script>
    if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))){
        new WOW().init();
    };
</script>
相关插件-滚动,动画效果

向下滚动加载动画特效插件AOS

向下滚动网页加载动画特效插件AOS
  滚动
 36222  432

zepto移动端全屏滚动

移动端整屏滚动效果
  滚动
 32299  300

jQuery滚轮控制轮播图上下切换(原创)

jQuery滚轮控制轮播图上下切换,简单实用
  滚动
 38453  341

fullpage平滑换页+css3酷炫导航

fullpage平滑换页+css3酷炫导航
  滚动
 37492  492

讨论这个项目(42)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    浅叶 0
    2021/4/27 14:41:52
    可以引入animation文件就直接用吗 回复
    Deep??? 0
    2020/8/13 14:51:25
    这玩意不用用于商业用途,要付费购买授权 回复
    百年浮夸 0
    2020/8/3 16:16:46
    这不就是wow.js么。。。。 回复
    水『jing』 0
    2019/8/23 10:57:06
    当滚动较快时,每次滚动到最底部时,有很多空白,如何优化?
    鼠标滚动到当前位置,然后刷新页面时,当前页面变成空白了,请问如何优化? 回复
    西安美好整形美容医院 0
    2018/9/28 10:20:07
    Belmgbeid 0
    2018/5/28 10:46:02
    当滚动较快时,每次滚动到最底部时,有很多空白,如何优化? 回复
    sanniu 0
    2018/5/2 17:52:54
    这个套用简单吗,新手
    回复
    一风残落叶一 0
    2018/4/11 10:38:03
    有没有每次都触发的 回复
    insist 0
    2018/2/2 16:44:33

    就是要找这种只触发一次的效果

    回复
    ご冬冬变坏了 0
    2018/1/29 11:21:53
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复