配合animate.css使用方法,Animate.css和wow.js的搭配使用

常常见到某个网站的动画是在屏幕显示到This元素的时候,会有个过渡动画。php

主要区别于在普通页面是在页面加载完成后全部动画一块儿动,或者设置延迟时间。css

而这两个插件混搭使用能够是页面如今到该元素时才加载动画。拥有很是不错的效果。html

算个比较常见的交互效果,研究了一下午,主要使用如下两个插件完成。git

1.wow.jsgithub

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

2.Animate.cssapp

很是优秀的CSS3动画库,不依赖于jQuery,纯CSS动画动画

用法:网站

分别引入wow.js与Animate.cssui

在想添加动画的元素中添加'wow'     (必须)

在想添加动画的元素中添加'animatecss'     (为动画的Class,能够在该网站找到合适的动画http://daneden.github.io/animate.css/   本身写也能够)

new WOW().init();

能够不依赖JQuery,而且在移动端也有不错的效果

下边附上下载连接地址,方便大家去下载使用!

http://dl42.yunpan.360.cn/intf.php?method=Download.downloadFile&qid=574751937&fname=%2F%E6%96%87%E6%A1%A3%2Fwow_js.rar&fhash=62916758ed57d181f6593594774b0afc9387162d&dt=42_42.44bedc46bb210a0d4a89a4dbf43d0ce0&v=1.0.1&rtick=14557003627324&open_app_id=0&devtype=web&sign=26fc68affc29085a4523f8f9d529d2dd&

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值