前端动画 wow.js 效果
让花里胡哨的特效变简单
wow.js动画class介绍
引入css样式以及js插件
<link rel="stylesheet" type="text/css" href="./css/animate.min.css">
<script src="./js/wow.min.js"></script>
<script>
new WOW().init();
</script>
wow rollIn | 从左到右、顺时针滚动、透明度从100%变化至设定值 |
wow fadeInDown wow fadeInUp wow fadeInLeft wow fadeInRight |
从上往下、类似淡入淡出 从下往上、 类似淡入淡出 从左往右、类似淡入淡出 从右往左、类似淡入淡出 |
wow bounceIn | 从原位置出现,由小变大超出设定值,再变小小于设定值,再回归设定值、透明度从100%变化至设定值 |
wow bounceInUp | 从下往上、窜上来以后会向上超出一部分然后弹回去、透明度为设定值不变 |
wow bounceInDown | 从上往下、掉下来以后会向下超出一部分然后弹跳一下、透明度为设定值不变 |
wow bounceInLeft | 从左往右、移过来以后会向右超出一部分然后往左弹一下、透明度为设定值不变 |
wow bounceInRight | 从右往左、移过来以后会向左超出一部分然后往右弹一下、透明度为设定值不变 |
wow slideInUp |
从下往上、上来后固定到设定位置、透明度为设定值不变(up是从下往上)(如果元素在最下面,会撑开盒子高度) |
wow slideInDown | 从上往下、上来后固定到设定位置、透明度为设定值不变 |
wow slideInLeft | 从左往右、上来后固定到设定位置、透明度为设定值不变(left却是从左往右) |
wow slideInRight | 从右往左、上来后固定到设定位置、透明度为设定值不变 |
wow lightSpeedIn | 从右往左、头部先向右倾斜,又向左倾斜,最后变为原来的形状、透明度从100%变化至设定值 |
wow pulse | 原位置放大一点点在缩小至原本大小、透明度为设定值不变(配合动画执行次数属性效果更佳) |
wow flipInX | 原位置后仰前栽、透明度从100%变化至设定值 |
wow flipInY | 原位置左右旋动、透明度从100%变化至设定值 |
wow bounce | 上下抖动、透明度为设定值不变(配合动画执行次数和动画持续时间属性可以实现剧烈抖动亦或是慢慢抖) |
wow shake | 左右抖动、透明度为设定值不变(配合动画执行次数和动画持续时间属性可以实现剧烈抖动亦或是慢慢抖) |
wow swing | 从右往左、头部先向右倾斜,又向左倾斜,最后变为原来的形状、透明度为设定值不变 |
wow bounceInU | 原位置不变、直接从不显示到显示(无过过渡效果) |
wow wobble | 原位置不变、类似于一个人站在那左右晃头、透明度为设定值不变 |
例:
<li class="wow bounceInLeft" data-wow-duration="1s" data-wow-delay="1s" data-wow-offset="70" data-wow-iteration="1">
</li>
data-wow-duration(动画持续时间)、
data-wow-delay(动画延迟时间)、
data-wow-offset(元素的位置露出后距离底部多少像素执行)、
和data-wow-iteration(动画执行次数)
转载于:https://www.cnblogs.com/caopeng/p/11194827.html
前端动画 wow.js 效果相关推荐
- vue页面滚动动画——wow.js教程
WOW.js 是一款帮助你实现滚动页面时触发CSS 动画效果的插件. 缺陷:当页面向下滚动时,动画出现:当页面向上回滚时,动画不会回退.(即动画仅出现一次!) 官网地址 https://www.de ...
- 前端插件 -- WOW.js动画插件
WOW.js动画插件 有的页面在向下滚动的时候,有些元素会产生细小的动画效果.比如需要做到滚动条滑到某个位置时,才能显示动画.wow.js 依赖 animate.css,所以它支持 animate.c ...
- Vue+wow.js+animate.css-实现页面滚动可视区域动画效果展示-案例
说明 wowjs-当页面向下滚动时,动画出现:当页面向上回滚时,动画不会回退. 安装 npm install wowjs --save-dev npm install animate.css --sa ...
- 动态效果html wow,WOW.js轻松让网页实现动画效果
给大家分享一个小插件,名字叫做WOW.js,这个插件是基于animate.css,animate.css是现在很流行的css动画库.这款插件作用很简单,可以及时实现网页中任意部分动画切入的效果.但是有 ...
- 【前端】使用wow.js这个插件(实现页面动画效果),提高前端开发效率。
1.简介 有的页面在向下滚动的时候,有些元素会产生细小的动画效果.比如需要做到滚动条滑到某个位置时,才能显示动画. wow.js 依赖 animate.css,所以它支持 animate.css 多达 ...
- WOW.js – 在页面滚动时展现动感的元素动画效果
在一些网页上,当你滚动页面的时候会看到各式各样的元素动画效果,非常动感.WOW.js 就是一款帮助你实现这种 CSS 动画效果的插件,很容易定制,你可以改变动画设置喜欢的风格.延迟.长度.偏移和迭代等 ...
- 动态效果html wow,WOW.js ? 在页面滚动时展现动感的元素动画效果_html/css_WEB-ITnose...
在一些网页上,当你滚动页面的时候会看到各式各样的元素动画效果,非常动感.WOW.js 就是一款帮助你实现这种 CSS 动画效果的插件,很容易定制,你可以改变动画设置喜欢的风格.延迟.长度.偏移和迭代等 ...
- wow.js动画效果
1.因wow.js依赖于animate.css 所以要安装 wowjs 和 animate.css npm install wowjs --save -dev // wowjs npm install ...
- Animate.css+wow.js实现页面滚动到可视区显示动画效果
今天看迅雷官网 https://www.xunlei.com/v2018/dist/aboutus.html 实现的滚动到可视区域后显示动画,自己之前没做过这种,非常感兴趣,然后问小伙伴, 大部分都没 ...
最新文章
- SAP QM 样品废弃后如何删除physical samples记录?
- 【开发环境】为 Visual Studio Community 2013 版本安装中文语言包 ( 安装 Test Agents 2013 | 安装 Visual Studio 2013 简体中文 )
- android高效加载网络图片
- Linux系统时间函数
- 编译通过,但在运行时报Resolution of the dependency failed
- 2010年11月编程语言排行榜:手机里的代码
- Strange Birthday Party CodeForces - 1471C
- python3 多线程_Python3多线程爬虫实例讲解
- python 螺旋数组_人工智能首选语言是什么 究竟Python有多强大
- Unity 官方教程 学习
- vs2019怎么调整字体大小_每年至少十万考生涂错答题卡,是时候讨论一下最新版答题卡怎么用了...
- JavaScript基础语法介绍
- 【 Linux 网络虚拟化 】Openvswitch
- 安装无线网卡后,显示网络电缆被拔出?
- Microsoft Office Visio 2007 简体中文专业版
- 教你轻松安装Adobe Acrobat XI Pro(编辑PDF使用的)
- 关于图像格式jpg、gif、png、svg、bmp、WebP的区别以及应用场景
- Hello I am whiter. Nice to meet you!!!
- QNX支持的BSP包QNX os supported board(ARM+MIPS+POWERPC+X86)
- linux内核调度 宿主机,Qemu虚拟机与宿主机之间文件传输
热门文章
- 64位ie加载java失败_java-无法在AMD 64位平台上加载IA 32位.dll
- linux驱动日志格式,( 转)嵌入式Linux驱动Makefile
- readfile函数使用方法_1分钟学会LOOKUP函数,有网友说使用这个方法,初学者秒变大神...
- Mybatis-puls打印sql语句
- Linux进阶之路——常用命令总结
- 个人生活助手app_美居App 6版重磅升级 开启智慧生活新范式
- java阻塞锁_java – 阻止锁与非阻塞锁
- Apprentissage du français partie 3
- 长沙医学院学位计算机考试内容,湖南长沙医学院2017年9月计算机等级考试报名时间...
- python树莓派串口通信实例_树莓派通过串口发送数据