首页 建站教程 WEB前端 正文

给网页增加WOW插件滚动触发css动效

随着浏览器的兼容性增强,css3动画特效运用也越来越广,通过css3动画库加js可以实现很多炫酷的效果。比如在滚动页面时会触发展示各式各样的动画效果,通过设置调整可以改变动画的风格、延迟、偏移量等。优美尚品精致版企业站主题就增加了这种效果,改变了传统的直显示模式,使页面不单调而更加生动,吸引浏览者的视点,增强浏览体验。今天介绍的就是通过wow.js和动画库来...

随着浏览器兼容性增强,css3动画特效运用也越来越广,通过css3动画库加js可以实现很多炫酷的效果。比如在滚动页面时会触发展示各式各样的动画效果,通过设置调整可以改变动画的风格、延迟、偏移量等。优美尚品精致版企业站主题就增加了这种效果,改变了传统的直显示模式,使页面不单调而更加生动,吸引浏览者的视点,增强浏览体验

今天介绍的就是通过wow.js和动画库来实现

 演示效果 

使用方法:

第一步引用动画库 Animate.css wow.js

<link rel="stylesheet" href="css/animate.css">
<script src="js/wow.js"></script>

第二步页面html代码

<div class="wow fadeInLeft"></div>
<div class="wow fadeInRight"></div>

也可以给需要动效的html元素加入 data-wow-duration(动画持续时间)和 data-wow-delay(动画延迟时间)属性,如:

<div class="wow fadeInLeft" data-wow-duration="2s" data-wow-delay="5s"></div>
<div class="wow fadeInRight" data-wow-offset="10"  data-wow-iteration="10"></div>

第三步JavaScript

new WOW().init();

如果需要自定义配置

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

参数

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

本文由优美主题原创或收集发布

转载请注明本文地址:http://www.umtheme.com/web/56.html

相关推荐

纯css简单实现角标样式

纯css简单实现角标样式

纯css实现角标效果,通常在置顶,推荐,热门等需要特殊标注的场景中可以应用到,这里主要用到transform:rotate(-30deg...

WEB前端 2020.10.16 0 107

如何在html页面中通过css隐藏元素

在平常的页面布局中,我们经常会遇到将某个模块隐藏,而实现不同的页面布局或js交互效果,尤其是在响应式布局中比较常见,下面我们整理了一些关于实现隐藏页面元素的多种方法以及各种方法不同的特点(如:是否占据...

WEB前端 2020.09.18 0 122

web前端写html页面div+css命名规范

web前端写html页面div+css命名规范

使用良好的CSS书写规范来写CSS代码,既能最大化优化前端代码,提升代码阅读体验,更重要的是为以后维护带来方便。常用的CSS命名一般由小...

WEB前端 2020.09.08 0 172

发布评论

ainiaobaibaibaibaobaobeishangbishibizuichiguachijingchongjingdahaqiandaliandangaodw_dogedw_erhadw_miaodw_tuzidw_xiongmaodw_zhutouganbeigeiliguiguolaiguzhanghahahahashoushihaixiuhanheixianhenghorse2huaixiaohuatonghuaxinhufenjiayoujiyankeaikeliankouzhaokukuloukunkuxiaolandelinileimuliwulxhainiolxhlikelxhqiuguanzhulxhtouxiaolxhwahahalxhzanningwennonuokpinganqianqiaoqinqinquantouruoshayanshengbingshiwangshuaishuijiaosikaostar0star2star3taikaixintanshoutianpingtouxiaotuwabiweifengweiquweiwuweixiaowenhaowoshouwuxiangjixianhuaxiaoerbuyuxiaokuxiaoxinxinxinxinsuixixixuyeyinxianyinyueyouhenghengyuebingyueliangyunzanzhajizhongguozanzhoumazhuakuangzuohenghengzuoyi

感谢您的支持