wow.js+animate.css——有趣的页面滚动动画
今天偶然间发现了一个使用特别简单的页面动画效果,还挺不错的,玩了一个上午,现在介绍一下这个滚动动画:
一、使用方法:
2.下载wow.js
3.引用文件,像这样:
<link href="css/animate.min.css" rel="stylesheet" />
<script type="text/javascript" src="js/wow.min.js"></script>
4.初始化wow.js
<script>
new WOW().init(); //WOW必须大写呀
</script>
或者
<script>
wow = new WOW({
boxClass: 'wow', // default 盒子类名
animateClass: 'animated', // default 为animate.css触发css动画的库
offset: 0, // default 偏移量
mobile: true, // default 是否支持手机
live: true // default 检查新元素
})
wow.init();
</script>
属性解释:
属性/方法 | 类型 | 默认值 | 说明 |
---|---|---|---|
boxClass | 字符串 | ‘wow’ | 需要执行动画的元素的 class |
animateClass | 字符串 | ‘animated’ | animation.css 动画的 class |
offset | 整数 | 0 | 距离可视区域多少开始执行动画 |
mobile | 布尔值 | true | 是否在移动设备上执行动画 |
live | 布尔值 | true | 异步加载的内容是否有效 |
5.在想要加入动画的地方加上wow 样式,加上一个animate.css动画名如:
<div class="wow slideInLeft"></div>
这样一个简单的动画就完成了!
二、animate.css动画名称及效果
三、相关属性:
wow.js的data-wow-duration(动画持续时间)
data-wow-delay(动画延迟时间)
data-wow-offset(距离开始动画(浏览器底部))
data-wow-interation(动画重复的次数)
形如:
<div class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s"></div>
<div class="wow slideInRight" data-wow-offset="10" data-wow-iteration="10"></div>
wow.js+animate.css——有趣的页面滚动动画的更多相关文章
- js、css动态压缩页面代码
1.js.css动态压缩页面代码 <%@ Page Language="C#" AutoEventWireup="true" CodeFile=" ...
- 如何查看一个网页特定效果的js代码(动画效果可js和css)(页面可以看到js的源代码)
如何查看一个网页特定效果的js代码(动画效果可js和css)(页面可以看到js的源代码) 一.总结 1.动画效果可能是 CSS 实现的,也可能是 JS 实现的. 2.直接Chrome的F12调试即可, ...
- wow.js wow.min.js animate.css animate.min.css
奉献给下载不到源码的小伙伴,下载到的请忽视 wow.js (function() { var MutationObserver, Util, WeakMap, getComputedStyle, ge ...
- Slick.js+Animate.css 结合让网页炫动起来
一个代码示例: html部分 <link rel='stylesheet prefetch' href='//cdnjs.cloudflare.com/ajax/libs/animate.css ...
- animate.css 一些常用的CSS3动画效果
大家已经开始在项目中使用一些CSS3动画效果了吧,这让网站在高端浏览器上看起来很上流.animate.css是一个老外做的各种CSS3动画的合集,比较全,也很炫,大家可以参考学习一下. 项目主页:ht ...
- js实现浮动框跟随页面滚动,最后停留在原来位置
左边悬浮的二维码会跟随页面向上或者向下滚动,最后停留在原来的位置. <div style="background:red; width:1000px; height:7000px; m ...
- js和css分别实现透明度的动画实现
js实现 两个函数 即setInterval和setTimeout setTimeout((function(){})(1/10),1*100) 该函数有两个参数,第一个为执行的函数,第二个为事件参数 ...
- vue项目中引入animate.css和wow.js
本文转自:https://blog.csdn.net/liyunkun888/article/details/85003152 https://www.zhuimengzhu.com/content/ ...
- WOW.js——在页面滚动时展现动感的元素动画效果
插件描述:WOW.js 是一款可以实现滚动页面时触发CSS 动画效果的插件,动态效果可以使网站显示更有动感. 当页面在向下滚动的时候,使用WOW.js可以让页面元素产生细小的动画效果,从而引起浏览者注 ...
随机推荐
- 杭电acm 1032题
The Problem问题 Consider the following algorithm:考虑下面的算法: 1 2 3 4 5 6 input n print n if n = 1 then st ...
- R: vector 向量的创建、操作等。
################################################### 问题:创建.操作向量 18.4.27 怎么创建向量 vector,,及其相关操作 ??? 解 ...
- 自定义map对象,用于再不支持es6的map的时候
function Map() { this.elements = new Array(); // 获取Map元素个数 this.size = function ...
- 理解linux服务器mcelog如何工作
What are Machine Check Exceptions (or MCE)? A machine check exception is an error dedected by your s ...
- 安全测试 + 渗透测试 Xmind 要点梳理
从事测试工作多年,一直对安全测试充满神秘感.买了本书,闲来无事时翻看了解.发现书的开头提供的Xmind脑图挺有参考价值,所以做了次“搬运工”,提供给想接触了解安全测试/渗透测试的小伙伴. 安全测试要点 ...
- C++基础之函数和作用域
(1)函数的定义格式如下所示.<类型><函数名>(<形参表>) {<若干条语句>}其中,<类型>包含存储类和数据类型.存储类省略为外部函数, ...
- [CentOS7] SELinux
声明:本文主要总结自:鸟哥的Linux私房菜-第十六章.程序管理與 SELinux 初探,如有侵权,请通知博主 SELinux = Security Enhanced Linux 传统的文件权限与账号 ...
- Permutations and Permutations II
Permutations 问题:给定一个无重复元素的数组,输出其中元素可能的所有排列 示例: 输入:[2,3,4] 输出:[ [2,3,4], [2,4,3], [3,2,4], [3,4,2], [ ...
- WPF动画——故事板(Storyboard)
1.XAML代码 <Window x:Class="故事板.MainWindow" x:Name="window" xmlns="http:// ...
- Openstack swift 学习笔记
Swift 不是文件系统或者实时的数据存储系统,而是对象存储,用于长期存储永久类型的静态数据.这些数据可以检索.调整和必要时进行更新.Swift最适合虚拟机镜像.图片.邮件和存档备份这类数据的存储. ...