#UI+前端#（六）动效形成（wow.js）

WOW.js使用方法

引入文件
<link rel="stylesheet" href="css/animate.css">
HTML
<div class="wow slideInLeft"></div>
<div class="wow slideInRight"></div>
- 可以加入 data-wow-duration（动画持续时间）/ data-wow-delay（动画延迟时间）/ data-wow-offset（动画开始位置）属性，如：
  <div class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s" data-wow-offset="200"></div>
JavaScript

<script src="js/wow.min.js"></script>
<script>new WOW().init();
</script>

如果需要自定义配置，可如下使用：

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

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

bounceIn
bounceInLeft
bounceInRight
bounceInUp
bounceInDown
bounceOut

fadeIn
fadeInLeft
fadeInRight
fadeInUp
fadeInDown
fadeOut
lightSpeedIn
lightSpeedOut

rotateIn
rotateInUpLeft
rotateInUpRight
rotateInDownLeft
rotateInDownRight
rotateOut

rollIn
rollOut

slideInLeft
slideInRight
slideInUp
slideInDown
slideOut

zoomIn
zoomInLeft
zoomInRight
zoomInUp
zoomInDown
zoomOut

#UI+前端#（六）动效形成（wow.js）相关推荐

前端canvas动效实战，PIXI+GSAP仿写vanmoof刹车动效 | 猿创营
前言事情是这样的,上个月接了一个活儿.客户要我们模仿一个国外的网站 https://www.vanmoof.com/en-NL/s3?color=dark 为他们做几个展示动效. 确实很酷!这个项目 ...
UI加载动效模板|优秀作品给UI设计师做个示范
加载动效是UI动效设计中最流行的类型之一.这也难怪,因为等待是我们每天线上和线下都可能遇到的烦人的事情.任何让等待变得没那么无聊的因素都是宝贵的--因为在与应用程序和网站进行交互时,加载总是首当其冲的 ...
android 红包ui,UI-红包动效设计 - UI设计教程_PS（CC2017）、AE（CC2017） - 虎课网
1. 打开[PS],制作红包动效素材:[框选]"盖子""A面""B面"图层按[Ctrl+T]自由变换缩小,调整图层顺序:[关闭]PS. 2. ...
前端实现炫酷动效_前端动效实现--lottie - web
前端常用动效实现方式 CSS3 帧动画 CSS 发展到了今天,它的强大几乎不是我们可以想想到的.合理的使用Animation可以实现很多神奇效果.配合设计师的导出图,前端使用序列帧即可实现动画效果. ...
通过动效学习UI设计
动效和UI的结合是未来游戏的发展趋势,UI设计也要过程也要注重动效的最终呈现,两者结合才能做出更好的效果游戏行业越来越多的公司开始注重动效的设计,但动效的表现是建立在UI设计的基础之上,更多的时候动 ...
动效设计原理：从卡通动画到UI动效
UI是基于静态页面来设计的,页面之间通过跳转切换.在设计过程中,设计师很重视单页的视觉效果,却经常忽略了对界面跳转的处理.这些未经处理的跳转由于没有提供足够的预期,所以用户在使用时经常会觉得困惑.与 ...
svga文件预览_工作案例分享：SVGA动效落地的使用与避坑
编辑导读:网络上关于 SVGA 的讨论大多数都只是在软件上的问题,具体实践案例很少.本文作者依据工作中项目实践的所思所想,结合案例等分享了 SVGA 动效落地使用过程中非常有价值的设计知识,并对过程存 ...
App动效原理和应用设计
时下对动效的追捧,疯狂至可以用一句话形容--"没有动效的APP,简直不是好的APP".优秀的动效设计在提升产品体验.用户粘性方面的积极作用有目共睹,已然成为现下Web.APP产品交 ...
wx-wow微信小程序实现wow.js功能(微信小程序动效库)
该项目为提供微信小程序一套便捷好用的动画执行方案, 通过添加简单的动画类名和一些简单的参数,即可实现想要的动画效果.灵感来源 WOW.js wx-wow 需要调试小程序基础库 >2.5 先附上 ...

#UI+前端#（六）动效形成（wow.js）

WOW.js使用方法

#UI+前端#（六）动效形成（wow.js）相关推荐

最新文章

热门文章