你好,欢迎访问我的博客!登录 评论排行榜 领券购物 免责声明 投稿本站 本站主题
当前位置:首页 - 笔记 - Web前端 - 正文 代码,改变世界!

wow.js让你的网页元素活跃起来

2018-01-17Web前端墨初398°c
A+ A-

很多的网站,尤其是一些手机官网或某种产品的官网,都会把自己网站的页面中一些元素作得美观起来。比如一些产吕,在打开网页或网页下拉到产品图片的时候,图片就像活了一样动起来,很是有趣。

今天介绍一款,让网页元素活跃起来的JS插件,WOW.js

此插件必须依赖Animated.css使用

使用方法

引入WOW.js和animate.css

可以从文章最下方提供的GetHub上下载wow.js也可以使用七牛提供的CDN静态资源库或其他的CDN静态资源库引用wow.js和animate.css文件

<link rel="stylesheet" type="text/css" href="animate.css">
<script src="WOW.js" type="text/javascript"></script>

标记元素

1、在你所要使用样式的元素的CLASS属性中加入 wow 以及动画名称

2、还可以加可以加入 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>

javascript代码

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

wow.js的方法属性

关于javascript代码属性讲解

wow.js

点击放大

animated.css动画参数

CLASS类名动画效果,具体的效果可以查看animated.css演示效果,演示地址在最下方

animate.css

点击放大

下载&CDN

wow.js  GetHub地址:https://github.com/matthieua/WOW

wow.js  七牛CDN公共库: https://cdn.staticfile.org/wow/1.1.2/wow.min.js  

animate.css  七牛CDN公共库:https://cdn.staticfile.org/animate.css/3.5.2/animate.min.css

animate.css  动画演示地址:https://daneden.github.io/animate.css/

  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  选择分享方式
  移步手机端
wow.js让你的网页元素活跃起来

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章
标签:

发表评论

选填

必填

必填

选填

请拖动滑块解锁
>>


开源系统
时间:2018-01-17 21:15:10

网站越简单越好看

  用户登录