shaosiming

WOW.js 一个浏览器滚动特效组件,可自定义样式

wow.js是一个浏览器滚动载入特效画面的插件,比如我之前制作的《岁月安然》模板中,div层已各种方式加载出来就是使用了wow.js组件的滚动动画。...

关键词: js 浏览器 特效 wow 组件
时间:2019-09-11
查看:
评论:0 条 / 我也去评论
wow.js是一个浏览器滚动载入特效画面的插件,比如我之前制作的《岁月安然》模板中的部分div层就以各种方式加载出来,就是使用了wow.js组件的滚动动画。

同时,wow.js也可以配合本站之前发表过的animate.css动画特效一起使用,效果会更好!animate.css使用办法看这里 点击前往

那篇文章介绍了animate.css的使用方法,这篇文章就来介绍一下wow.js的使用放,前提是wow.js必须配合animate.css使用,不然只有简单的上下左右滑动特效!

我这里就直接介绍配合animate.css一起使用的办法,只提供部分示例代码,然后自己发掘更多的动画方式。

引入wow.js 和 animate.css 文件  由少司命博客提供的statics静态文件库CDN加速源链接  点击查看说明

<link rel =“stylesheet”href =“https://statics.shaosiming.net/js/wow.min.js”>
<link rel =“stylesheet”href =“https://statics.shaosiming.net/css/animate.css”>

激活wow.js 

<!--插入到头部head内-->
<script >
   new WOW()。init();
</ script >

然后在需要载入特效的div层前插入wow.js的class元素信息,比如下方:

<div class="wow">
    <div class="123">
        少司命个人博客
    </div>
</div>

class="123" 这里就是你需要载入特效的div层信息!只需要用wow.js将它包括即可! 

然后在 class="wow" 里面加入一个 animate.css 动画元素~ 可以参考本站的:https://www.shaosiming.net/html/news/30.html

<!--bounceinUP 是 animate.css元素 -->
<div class=“wow bounceInUp”>  
    <div class="123">
        少司命个人博客
    </div>
</div>

可以说,现在已经完成了基础的动画特效,下面就是调节这些动画特效的参数信息。我也做出了一些例子~

data-wow-duration: 更改动画持续的时间
data-wow-delay: 动画开始前的延迟时间
data-wow-offset: 开始动画的距离是多少,推荐0-10
data-wow-iteration: 动画重复的次数,就是加载几次一共

简单的示例示例:

<!-- 持续2秒 进入页面五秒开始加载 -->
<section class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s"></section>
<!-- 距离浏览器边框10 重复10次  -->
<section class="wow slideInRight" data-wow-offset="10" data-wow-iteration="10"></section>

然后是高级一点的自定义设置信息

boxClass: 滚动时是否显示隐藏div层(未加载的)信息
animateClass: 触发的css类名,默认使用animate.css 就是默认填写 animate 
offset: 计算浏览器边框距离div层的距离,滚动到达这个距离参数,才会加载隐藏的信息
mobile: 是否在手机上显示wow.js 默认 tureh 开启  fales 关闭
live: 是否检查新的 wow.js 动画元素 同上,开启和关闭

简单的示例:

wow = new WOW(
    {
    boxClass:     'wow',      // 默认wow
    animateClass: 'animated', // 默认animate 就是 animate.css 动画库
    offset:       0,          // 默认0 推荐10以内 
    mobile:       true,       // 默认true开启 fales 关闭
    live:         true        //  默认true开启 fales 关闭
  }
  )
  wow.init();

怎么样,大家有没有看明白呢?当然了,也可以参考我在《岁月安然》模板中使用的部分特效调用参数
参考文章链接:https://www.shaosiming.net/html/27.html

好了,有了这么强大的组件支持,我相信大家一定能够学会如何灵活的在网页中载入各种特效的方式了!么么哒~
顶一下  
(4)
  100%
踩一下  
(0)
  0%
  • 本文标题:WOW.js 一个浏览器滚动特效组件,可自定义样式
  • 本文链接:https://www.shaosiming.net/html/news/31.html
  • 转载说明:如果没有标明转载均为少司命个人博客原创!转载需要注明出处~
  • 既然都来了,就说点什么吧……
    • 全部评论(0
      还没有评论,快来抢沙发吧!

    Animate.css 一个跨浏览器有趣的CSS动画特效组件

    Animate.css 是一个有趣的CSS动画特效组件,你可以在你的博客中使用它所提供的特效...

    Animate   css   动画   特效   
    2019-09-11
    156
    0