css3特效插件wow.js
在使用css3写特效的时候,会遇到比较麻烦的就是css3代码需要大量的调试,但是现在有了wow.js,让写特效变得简单了很多。
wow.js官网
https://www.delac.io/wow/index.html
使用教程:
第一步:wow.js依赖于animate.css,首先需要在 head内引入animate.css或者animate.min.css。
<link rel="stylesheet" href="css/animate.css">
第二步:引入wow.js或wow.min.js,然后js文件里面写一行代码。
<script src="js/wow.min.js"></script> <script> new WOW().init(); </script>
第三步:然后在对应的块状元素,添加相应的class类名,就可以实现动画。
<div class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s" data-wow-offset="10" data-wow-iteration="10"></div>
wow:是必须要添加的; slideInLeft:说明了动画的样式,是从左边滑动出来的; data-wow-duration:动画持续时间; data-wow-delay:动画延迟时间; data-wow-offset:元素的位置露出后距离底部多少像素执行; data-wow-iteration:动画执行次数; ===这四个属性可选可不选。
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/e0yu/p/11444441.html
css3特效插件wow.js相关推荐
- html全屏背景视频特效,HTML5全屏背景视频特效插件Vidage.js源码
下面我们对HTML5全屏背景视频特效插件Vidage.js源码文件阐述相关使用资料和HTML5全屏背景视频特效插件Vidage.js源码文件的更新信息. HTML5全屏背景视频特效插件Vidage.j ...
- 动画插件wow.js的使用方法
动画插件wow.js的使用方法 1,下载文件 animate.css 下载地址: http://daneden.github.io/animate.css/ wow.min.js 下载地址: http ...
- 前端插件 -- WOW.js动画插件
WOW.js动画插件 有的页面在向下滚动的时候,有些元素会产生细小的动画效果.比如需要做到滚动条滑到某个位置时,才能显示动画.wow.js 依赖 animate.css,所以它支持 animate.c ...
- CSS3 动画插件 aos.js
aos.js是一款效果超赞的页面滚动元素动画jQuery动画库插件.该动画库可以在页面滚动时提供28种不同的元素动画效果,以及多种easing效果.在页面往回滚动时,元素会恢复到原来的状态. 安装 y ...
- jQuery焦点图轮播特效插件bxslider,使用说明 及免费下载四川智汇蓝图整理带bxslider免费下载地址
这里分享一个方便实用的JQ 焦点图插件,它的特点简单易用,灵活方便通用性强:支持包含内容不HTML,视频,图片等.出众的兼容能力,完美兼容Firefox,Chrome,Safari,iOS,Andro ...
- Wow.js常用特效对应名称
wow.js是我非常喜欢使用的一个插件,不过每次用的时候都要去查一下每个类名代表什么意思,比较麻烦,这里记录一下. 1)引入animate.css <link rel="stylesh ...
- wow.js怎么使用这个插件
wow.js中各种特效对应的类名 一.(页面在向下滚动的时候,有些元素会产生细小的动画效果.虽然动画比较小,但却能吸引你的注意.) 刚知道wow.js这个插件,之前访问别的网站下拉滚动条会出现各种效果 ...
- 网页滚动特效—WOW.JS快速使用教程
一.wow.js 当页面滚动时产生一些动画效果 页面在向下滚动的时候,有些元素会产生细小的动画效果.虽然动画比较小,但却能吸引你的注意. 所需要的附件:wow.js animate.css(文章最后有 ...
- java 图片插件_[Java教程]10款功能强大的jQuery/CSS3图片特效插件
[Java教程]10款功能强大的jQuery/CSS3图片特效插件 0 2014-11-26 03:01:04 1.CSS3实现的底部带滚动云彩效果的网站登录页面 CSS3实现的底部带滚动云彩效果的网 ...
最新文章
- Magento多图导入
- 1045 Favorite Color Stripe (30 分)【难度: 中 / 知识点: DP】
- java 学习思路_Java的学习思路
- JavaFX鼠标拖拽事件
- gson-2.2.api简单
- SpringMVC中注解@RequestBody和@ResponseBody的使用区别
- 软件就像大教堂:我们建造它们——然后祈祷
- Java高级面试题!kafkastreams加时间窗口的count
- hdoj_1711_Number Sequence
- 我在试验Memcached,你的项目怎么处理缓存?
- [转]自定义UITableView各种函数
- PHP小白编程学习——第三方登录功能设计思维
- PyCharm的cache缓存文件清理
- Matlab求一阶导数
- 显卡检测神器 GPU-Z v2.30.0 简体中文汉化版
- 使用CollectionView简单实现轮播广告栏效果
- CPU有桌面版和服务器版,知识普及:服务器CPU和普通CPU有何不同
- python手撕分水岭算法
- 中行安全控件可致 Win8 笔记本键盘失灵
- 伽罗瓦死了,可是数学还活着
热门文章
- 智能家居布局:小米牵手美的,格力有点着急
- promise对象里resolve和reject状态讲解及Promise.all()的使用
- KKT条件(Karush-Kuhn-Tucker Conditions)
- Excel2000/XP和PowerPoint2000/XP下内部COM插件的实现
- linux msm dts加载分析
- linux下 启动MySql服务 重启MySql服务 查看服务状态 MySql服务开机自启动
- 利用Android studio开发Java程序
- 浙大计算机考研是自主命题吗,研究生考试 自主命题 是什么意思
- CODESYS开发教程2-设备添加
- CSS3实现bilibili会员购效果效果