动态效果html wow,WOW.js轻松让网页实现动画效果
给大家分享一个小插件,名字叫做WOW.js,这个插件是基于animate.css,animate.css是现在很流行的css动画库。这款插件作用很简单,可以及时实现网页中任意部分动画切入的效果。但是有2点要注意的地方
(1)此动画是检测屏幕滚动条实现达到一定位置执行动画效果的,所以当指定元素开始显示的时候才会开始动画,这个可以自定义。
(2)每个元素只能执行一种动画,不能同时实现多种动画一起播放的效果现在就来详细介绍一下这个插件如何使用,先贴上一个demo的例子
html>
WOW轻松让网页实现动画效果
body{overflow-x:hidden;font-family:"Microsoft Yahei";}
body h1{width:100%;margin:80px 0;font-size:50px;font-weight:500;text-align:center;}
body .txt{margin:80px 0;font-size:16px;text-align:center;}
.dowebok{margin:0 auto;}
.dowebok ul{list-style-type:none;}
.dowebok .m_list{font-size:0;text-align:center;}
.dowebok .wow{display:inline-block;width:280px;height:280px;margin:30px 15px 0;border-radius:50%;font:30px/280px "Microsoft Yahei";
vertical-align:top;*display:inline;zoom:1;}
.bg-green{background:#5bd5a0;}
.bg-blue{background:#1daee9;}
.bg-purple{background:#c843a5;}
.bg-red{background:#eb3980;}
.bg-yellow{background:#ffcc35;}
WOW.js - 页面滚动动画展示
WOW.js 能让页面滚动时显示动画,使页面更有趣。
//初始化
new WOW().init();
首先,介绍插件需要插入的文件和初始化流程,因为这个插件是基于animate编写的,所以插入文件得注意一下,需要引入animate.css
然后是引入WOW.js 引入的同时需要初始化init下。
//初始化
new WOW().init();
接下来我们学习下怎么自定义动画var wow = new WOW({
boxClass: 'wow',
animateClass: 'animated',
offset: 0,
mobile: true,
live: true});
boxClass 填字符串 ‘wow’是需要执行动画的元素的 class名
animateClass 字符串 ‘animated’是animation.css 动画自带的 class名
offset 整数 0 表示目标元素距离可视区域多少开始执行动画
mobile 布尔值 true 是否在移动设备上执行动画
live 布尔值 true 异步加载的内容是否有效
然后介绍一下动画播放的一些属性:
data-wow-duration="3s" 设置动画播放一次需要的时间
data-wow-delay="3s" 设置动画延迟多久开始执行
data-wow-iteration="5" 设置动画执行多少次
这些自定义属性只需要加在需要执行动画的html代码中就可以。
再介绍一下常用的几种默认动画样式:
lightSpeedIn:从右慢慢摇曳进入
rollIn:从左边旋转进入
pulse:变大
flipInX:绕x轴晃
shake:左右晃动
swing:吊在那要摇晃
bounce:原地上下抖动
bounceInLeft:从左方进来上下抖动
bounceInRight:从右方进来上下抖动
bounceInDown:从上方进来上下抖动
bounceInUp:从下方进来上下抖动
更多效果可以去 animate.css 官网 :https://daneden.github.io/animate.css/
动态效果html wow,WOW.js轻松让网页实现动画效果相关推荐
- 在html使用wow,让你的网页有点动画效果
当滚动条滑到相应位置,有些网页可以出现像从左或者从右移动到对应位置,或者一些盒子从底下浮出,这里就来说怎么实现的 其实不难,就是用到了wow.js 首先,下载jquery,wow.js和animate ...
- android+百叶窗动画效果,js实现横向百叶窗效果网页切换动画效果的方法
本文实例讲述了js实现横向百叶窗效果网页切换动画效果的方法.分享给大家供大家参考.具体分析如下: 这是一款很简洁但是效果却不错的网页切换效果,点击新网页后,网页会出现蓝白相间的百叶窗线条自动切换,直到 ...
- php加入js动态效果,js怎么给输入框增加动画效果
这次给大家带来js怎么给输入框增加动画效果,js给输入框增加动画效果的注意事项有哪些,下面就是实战案例,一起来看一下. (function() { function p() { window.requ ...
- 炫酷canvas网页背景动画效果
下载地址非常炫酷的网页背景旋转特效,基于canvas画布实现的网页背景动画效果 dd:
- js实现酷炫倒计时动画效果
前段时间和朋友去音乐餐厅吃饭,中间有个活动,然后看到他们软件公众号H5有个活动开始的倒计时的动画效果,于是想了下实现思路. <!DOCTYPE html> <html> < ...
- js实现下拉菜单动画效果
js实现下拉菜单动画效果 <!DOCTYPE html> <html lang="en"> <head><meta charset=&qu ...
- SVG网页波浪动画效果背景
给大家分享一个SVG网页波浪动画效果背景 CSS部分 <style> .body { min-height: 100vh; display: -webkit-box; display: f ...
- Three.js中实现ASCII文本动画效果
场景 Three.js中使用requestAnimationFrame方法实现立方体转动和小球跳动的动画: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/arti ...
- vue伸缩效果_Vue.js - 元素展开、收起动画效果组件(附:二级菜单的展开、收缩动画效果)...
子菜单的展开.收缩功能在许多系统上都很常见,如果想要在打开收起时带有动画效果,过去常常会通过 jQuery 实现.而在 Vue 项目中,我们可以单独封装一个动画组件,方便使用. 1,效果图 点击一级菜 ...
最新文章
- Socket 基础解析使用ServerSocket建立聊天服务器
- Linux可执行文件如何装载进虚拟内存
- IDE之Visual Studio Code:Visual Studio Code的简介、安装、使用方法之详细攻略
- centos7 hadoop 2.8安装
- eclipser认java源码_java相关:Eclipse查看开发包jar里源代码的方法
- 32位mysql安装包_MySQL安装指南(CPT103)
- python 动态属性和特性
- 通过命令在navicat中创建数据库及表结构
- 使用Thumbnailator处理gif图片时遇到java.lang.ArrayIndexOutOfBoundsException: 4096异常处理
- 双十一凌晨苹果发布会,新 Mac 有望搭载 ARM 架构自研芯片
- cygwin图文安装教程
- LeetCode Single Number I / II / III
- 同是共享内存,shm_open与shmget有什么差异?
- PS批量导出ios、android图标
- 计算文本相似度的常用算法
- Word打字延迟卡顿的解决方法
- 面试官:如何用最少的老鼠试出有毒的牛奶?
- Java HotSpot(TM) 64-Bit Server VM warning: ignoring option MaxPermSize=256m; support was removed in
- 双硬盘下安装win+linux关于开机引导的问题
- 收支系统(超超超简版)1.0