Wow.js常用特效对应名称
wow.js是我非常喜欢使用的一个插件,不过每次用的时候都要去查一下每个类名代表什么意思,比较麻烦,这里记录一下。
1)引入animate.css
<link rel="stylesheet" type="text/css" href="css/animate.css"/>
2)引入wow.js
<script src="js/wow.js" type="text/javascript" charset="utf-8"></script>
3)初始化
wow = new WOW({
animateClass: 'animated',
});
wow.init();
4)四大属性:data-wow-duration(动画持续时间)、data-wow-delay(动画延迟时间)、data-wow-offset(元素的位置露出后距离底部多少像素执行)和data-wow-iteration(动画执行次数)。
<div class="wow swing" data-wow-duration="2s" data-wow-delay="5s"></div>
<div class="wow flipInY" data-wow-offse=10 data-wow-iteration=10></div>
5)常用特效类名:
wow rollIn | 从左到右、顺时针滚动、透明度从100%变化至设定值 |
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 | 原位置不变、类似于一个人站在那左右晃头、透明度为设定值不变 |
参考地址:https://www.cnblogs.com/yangjunfei/p/6746926.html
Wow.js常用特效对应名称相关推荐
- wow.js实现各种动画特效
下载地址 https://www.bootcdn.cn/wow/ 官方网站 https://www.delac.io/wow/ WOW.js用于设置用户滚动页面时触发各种CSS动画,WOW.js需和a ...
- css3特效插件wow.js
在使用css3写特效的时候,会遇到比较麻烦的就是css3代码需要大量的调试,但是现在有了wow.js,让写特效变得简单了很多. wow.js官网 https://www.delac.io/wow/in ...
- 【自己的整理】页面滚动时触发动画特效 wow.js + Animate.css
在页面添加初始动画特效 在页面添加初始动画特效的时候无意接触到wow.js 这个动画库配合Animate.css可以按照模板快速创建动画效果,虽然动画效果就像ppt里面的动画效果一样... 环境设置 ...
- 页面滚动时触发动画特效 wow.js + Animate.css
在页面添加初始动画特效 在页面添加初始动画特效的时候无意接触到wow.js 这个动画库配合Animate.css可以按照模板快速创建动画效果,虽然动画效果就像ppt里面的动画效果一样... 环境设置 ...
- 网页滚动特效—WOW.JS快速使用教程
一.wow.js 当页面滚动时产生一些动画效果 页面在向下滚动的时候,有些元素会产生细小的动画效果.虽然动画比较小,但却能吸引你的注意. 所需要的附件:wow.js animate.css(文章最后有 ...
- Nuxtjs上使用wow.js+animate.css实现滚动加载动画
最近做个官网(技术栈使用Nuxt)需要用到滑动到可视区域才触发动画效果,几乎所有的页面都要"动"起来,手写要累死的节奏,赶紧寻找工具!发现wow.js+animate.css可以满 ...
- prototype.js常用函数及其用法
prototype.js常用函数: 函数名 解释 举例 Element.toggle 交替隐藏或显示 Element.toggle(''div1'',''div2'') Element.h ...
- JS常用属性方法大全
JS常用属性方法大全 1.输出语句:document.write(""); 2.JS中的注释为: 3.传统的HTML文档顺序是:document->html->(hea ...
- 前端动画 wow.js 效果
让花里胡哨的特效变简单 wow.js动画class介绍 引入css样式以及js插件 <link rel="stylesheet" type="text/css&qu ...
最新文章
- 为什么在Python里推荐使用多进程而不是多线程?(为什么python多线程无法增加CPU使用率?)...
- Token认证微服务
- linux 内核模块开发,Linux内核模块开发(笔记)
- 有向图的邻接表描述 c++
- 使用SQLyog创建简单的触发器
- c#读取csv文件成DataTable,将DataTable数据存储为csv格式文件
- Hadoop集群部署模型纵览3
- kali linux ap热点,Kali(debian)创建WIFI AP热点
- linux系统使用宝塔来搭建内部gitlab教程
- 代码实现HelloMeituanCom转换为hello.meituan.com
- 广州商学院 软件工程 博客列表
- 1527. 患某种疾病的患者(like关键字的使用)
- STM32 -- 做一块自己的开发板(STM32F103C8T6)
- myeclipse部署时An internal error occurred 错误的几种情况
- 免费领,自动化控制编程入门到开挂学习路径(附教程和软件工具)
- 剑指offer 专项突破版 74、合并区间
- 黑莓愿意递交用户数据,协助各国警方执法
- threejs 展示gltf模型加了环境光,全黑
- UCloud Ubuntu 18.04 配置GPU环境踩坑指南,包括驱动,CUDA,Docker,Nvidia-Docker等
- windows访问共享文件夹 登录失败: 禁用当前的账户 解决方法