插件描述:WOW.js 是一款可以实现滚动页面时触发CSS 动画效果的插件,动态效果可以使网站显示更有动感。

当页面在向下滚动的时候,使用WOW.js可以让页面元素产生细小的动画效果,从而引起浏览者注意力。

WOW官网https://www.delac.io/wow/docs.html

使用教程

1.WOW.js 依赖 animate.css

可以通过更改设置链接到另一个CSS动画库,在 head内引入animate.css或者animate.min.css。

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

2.引入wow.js或者wow.min.js,然后js文件里再写入代码

<script src="js/wow.min.js"></script>
<script>
new WOW().init();
</script>

如果需要自定义配置,可如下使用:

var wow = new WOW({
boxClass: 'wow',
animateClass: 'animated',
offset: 0,
mobile: true,
live: true
});
wow.init();

3.在块状元素内添加相应的class类名就能实现相应的动画

data-wow-duration: 动画持续时间
data-wow-delay: 动画延迟时间
data-wow-offset: 元素的位置露出后距离底部多少像素执行
data-wow-iteration: 动画执行次数

这四个属性可选可不选。

例子:
<section class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s">
</section>
<!-- slideInLeft说明了动画的样式,是从左边滑动出来的 -->
<section class="wow slideInRight" data-wow-offset="10"  data-wow-iteration="10">
</section>
可以在以下网址中参考动画样式https://www.helloweba.net/demo/2018/wowjs/

WOW.js——在页面滚动时展现动感的元素动画效果的更多相关文章

  1. WOW.js – 在页面滚动时展现动感的元素动画效果

    在一些网页上,当你滚动页面的时候会看到各式各样的元素动画效果,非常动感.WOW.js 就是一款帮助你实现这种 CSS 动画效果的插件,很容易定制,你可以改变动画设置喜欢的风格.延迟.长度.偏移和迭代等 ...

  2. WOW.js – 让页面滚动更有趣

    演示1 演示2-仿oppo首页 下载 简介 有的页面在向下滚动的时候,有些元素会产生细小的动画效果.虽然动画比较小,但却能吸引你的注意.比如刚刚发布的 iPhone 6 的页面(查看).如果你希望你的 ...

  3. WOW.js – 让页面滚动更有趣

    官网:http://mynameismatthieu.com/WOW/ 建议去官网一看 下载地址:https://github.com/matthieua/WOW 浏览器兼容 IE10+  Chrom ...

  4. ios真机使用fixed定位页面滚动时fixed定位的元素也会跟着滚动

    到了ios真机APP中,页面向下滚动,fixed的元素也跟着滚,虽然最后它还是到了它该在的地方,但是它跟着滚动也很影响页面的流畅性和交互性好伐.

  5. Javascript实现页面滚动时导航智能定位

    遇到的问题: 在做官网的时候,需要滚动定位的区块的图片不确定,无法确定用户浏览区域对应的模块导航 之前的解决方案是: 通过定位滚动条的位置来判断用户浏览区域对应的模块导航,这种方法的弊端是,区块的高度 ...

  6. JavaScript实现页面滚动到div区域div以动画方式出现

    用JavaScript实现页面滚动效果,以及用wow.js二种方式实现网页滚动效果 要实现效果是页面滚动到一块区域,该区域以动画方式出现. 这个效果需要二点: 一:我们要先写好一个css动画. 二:用 ...

  7. Progress.js – 为页面上的任意对象创建进度条效果

    Progress.js 是一个 JavaScript 和 CSS3 的库,它帮助开发人员为网页上的每个对象创建和管理进度条效果.你可以设计自己的模板,进度条或者干脆定制. 您可以使用 Progress ...

  8. 使用 CSS3 动感的图片标题动画效果【附源码下载】

    在网站中,有很多地方会需要在图片上显示图片标题.使用 CSS3 过渡和变换可以实现动感的鼠标悬停显示效果.没有使用 JavaScript,所以只能在支持 CSS3 动画的现代浏览器中才能正常工作.您可 ...

  9. WOW.js和animate.css让页面滚动时显示动画

    官网:http://mynameismatthieu.com/WOW/ bootstrap CDN服务:http://www.bootcdn.cn/wow/ 1.wow.js 实现了在网页滚动时的动画 ...

随机推荐

  1. POJ 1502:MPI Maelstrom Dijkstra模板题

    MPI Maelstrom Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 6499   Accepted: 4036 Des ...

  2. faster rcnn报错:TypeError: slice indices must be integers or None or have an __index__ method

    https://blog.csdn.net/qq_27637315/article/details/78849756 https://blog.csdn.net/qq_21089969/article ...

  3. SeetaFaceQt:Qt多线程

    为什么要做多线程,说个最简单的道理就是我们不希望在软件处理数据的时候界面处于无法响应的假死状态.有些处理是灰常花时间的,如果把这样的处理放到主线程中执行,就会导致软件一条路走到底,要等到处理完才能接收 ...

  4. Q1:Two Sum

    1. Two Sum 官方的链接:1. Two Sum Description : Given an array of integers, return indices of the two numb ...

  5. SQL基础教程(第2版)第5章 复杂查询:5-2 子查询

    第5章 复杂查询:5-2 子查询 ● 一言以蔽之,子查询就是一次性视图( SELECT语句).与视图不同,子查询在SELECT语句执行完毕之后就会消失.● 由于子查询需要命名,因此需要根据处理内容来指 ...

  6. Fiddler 断点命令

    Request 断点:bpu /priceCalculate 清除命令:bpu Response 断点:bpafter /priceCalculate 清除命令:bpafter

  7. MySQL--SHOW ENGINE INNODB STATUS

    ===================================== -- :: 0x7f305b965700 INNODB MONITOR OUTPUT =================== ...

  8. Python笔记_第四篇_高阶编程_高阶函数_1.map和reduce

    1. map()函数: 原型:map(fn,lsd) 参数1是函数 参数2是序列 功能:将传入的函数一次作用在序列中的每一个元素.并把结果作为一个新的Iterator返回.其实map函数就是一个for ...

  9. TCP/IP通信过程

    一.参考网址 1.以太网帧格式.IP数据报格式.TCP段格式+UDP段格式 详解 2. 二.TCP的建立过程 1.例子: 192.168.22.66 telenet到192.168.22.74的tcp ...

  10. 【记录】YAML 简易入门教程

    YAML 是 "YAML Ain't a Markup Language"(YAML 不是一种标记语言)的递归缩写.在开发的这种语言时,YAML 的意思其实是:"Yet ...