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

官网:http://mynameismatthieu.com/WOW/

bootstrap CDN服务:http://www.bootcdn.cn/wow/

1.wow.js

实现了在网页滚动时的动画效果,有漂亮的动画效果,依赖于Animate.css。

2.Animate.css (下载https://daneden.github.io/animate.css/)
非常优秀的CSS3动画库,不依赖于jQuery,纯CSS动画

使用方法

1、引入文件
<link rel="stylesheet" href="css/animate.min.css">

2、HTML
<div class="wow slideInLeft"></div>  
<div class="wow slideInRight"></div>  
可以加入 data-wow-duration(动画持续时间)和 data-wow-delay(动画延迟时间)属性,如:
<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>

3、javascript

new WOW().init();

如果需要自定义配置,可如下使用:
[javascript] view plain copy
var wow = new WOW({  
    boxClass: ‘wow‘,  
    animateClass: ‘animated‘,  
    offset: 0,  
    mobile: true,  
    live: true  
});  
wow.init();

配置
属性/方法 类型 默认值 说明
boxClass 字符串 ‘wow’ 需要执行动画的元素的 class
animateClass 字符串 ‘animated’ animation.css 动画的 class
offset 整数 0 距离可视区域多少开始执行动画
mobile 布尔值 true 是否在移动设备上执行动画
live 布尔值 true 异步加载的内容是否有效

原文地址:https://www.cnblogs.com/aimyfly/p/9049322.html

时间: 2024-12-08 01:23:31

WOW.js和animate.css让页面滚动时显示动画的相关文章

js页面滚动时层智能浮动定位实现:

案例展示: 第一个:每个人都有看过的淘宝页面: 案例就不多说了,有兴趣的可以多去找找, 这样的智能浮动效果还是不错的,挺方便. 基本的实现原理: 首先有一个默认状态就是没有滚动的时候,什么事情也不用做,定位可以是absolute,也可以是stati,fixed,relartive 这些都可以.我们主要需要关注的是当浏览器滚动的时候,(要浮动的块)要移除浏览器界面视区的时候,修改其position属性,让其浮动在窗口的上沿显示就可以了.最好的position属性就是fixed了,可以在IE6+和其

jQuery实现页面滚动时智能浮动定位

<!DOCTYPE html><html><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title>jQuery实现页面滚动时层智能浮动定位_前端开发</title>    <style type="text/css">        * { 

页面滚动时出现固定导航

页面滚动时出现固定导航的效果,参考页面有http://v.thea.cn/course/info_358和v.thea.cn. 参考代码如下: <div class="tab-title" style="position: static; top: 0px;"><span class="normal selected">课程介绍</span><span class="normal"&g

Javascript页面滚动时导航智能定位

常见的开发页面中可能会有这么一个需求,页面中会有多个模块,每个模块对应一个导航,当页面滚动到某个模块时,对应的模块导航需要加上一个类用于区分当前用户所浏览区域. 假设结构如下: <div class="container"> <div class="wrapper"> <div class="section" id="section1">section1</div> <di

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

遇到的问题: 在做官网的时候,需要滚动定位的区块的图片不确定,无法确定用户浏览区域对应的模块导航 之前的解决方案是: 通过定位滚动条的位置来判断用户浏览区域对应的模块导航,这种方法的弊端是,区块的高度不确定时就无法计算滚动条的位置来判断: 优化方案: 页面中会有多个模块,每个模块对应一个导航,当页面滚动到某个模块时,对应的模块导航需要加上一个类用于区分当前用户所浏览区域. 以下是DEMO <!-- html --><div class="container">

基于jQ+CSS3页面滚动内容元素动画特效

今天给大家分享一款基于jQ+CSS3页面滚动内容元素动画特效.这是一款基于jQuery+CSS3实现的页面滚动代码.该实例适用于适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 不支持IE8及以下浏览器. 在线预览   源码下载 实现的代码. html代码: <div class="htmleaf-container"> <div class="container"> <h2 class

页面滚动--添加animation动画效果

<!DOCTYPE html><html><head> <meta charset="utf-8"/> <title>动画</title> <script src="jquery-1.7.2.min.js" type="text/javascript" charset="utf-8"></script> <!--<scr

js实现浮动框跟随页面滚动,最后停留在原来位置

左边悬浮的二维码会跟随页面向上或者向下滚动,最后停留在原来的位置. <div style="background:red; width:1000px; height:7000px; margin:auto;">  </div> <div id="aa" style="position: absolute;right: 0px; top: 4600px;"><img src="001.jpg&qu

基于jQuery实现页面滚动时顶部导航显示隐藏效果

<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> <link rel=&quo