wow.js中各种特效对应的类名

本站资源均为站长亲测,真实有效,本站不发表未经验证的资源,请放心参与体验

一、(页面在向下滚动的时候,有些元素会产生细小的动画效果。虽然动画比较小,但却能吸引你的注意。)

刚知道wow.js这个插件,之前访问别的网站下拉滚动条会出现各种效果感觉特别神奇,现在自己依葫芦画瓢也能弄出来这种效果了。

虽然效果出来了,但是网上并没有整理好的各种特效对应的类名,所以写一篇通俗易懂(最起码自己能看懂)的文章供大家参考学习。(^_^)

二、首先说明一下怎么使用这个插件:

1、wow.js依赖于animate.css,首先在头部引用animate.css或者animate.min.css。

<link rel="stylesheet" type="text/css" href="css/animate.min.css">

 

2、在最底部引用wow.js或者wow.min.js,然后再下面再写一行javascript代码。(无需引用jQuery)

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

注意new WOW().init();中的WOW要大写,否则就没效果了。

3、在css下方js上方写需要动画的元素(必须设置为块状或者行内块状!必须设置为块状或者行内块状!必须设置为块状或者行内块状!),并添加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(动画执行次数)这四个属性可选可不选。

4、为了写文章专门测试了一下data-wow-offset和data-wow-iteration这两个属性,其中data-wow-offset=”数值”中的数值是动画完成后元素距离显示器底部的位置,而不是距离浏览器窗口底部的位置。

三、步入正题,下面依次测试各种class类名的动画效果。(力求通俗易懂)

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原位置不变、类似于一个人站在那左右晃头、透明度为设定值不变

四、配合data-wow-duration(动画持续时间)、data-wow-delay(动画延迟时间)、data-wow-offset(元素的位置露出后距离底部多少像素执行)和data-wow-iteration(动画执行次数)这四个属性可以完成很多效果,主要还是多实践。

五、IE6、IE7 等老旧浏览器不支持 CSS3 动画,所以没有效果;而 wow.js 也使用了 querySelectorAll 方法,IE 低版本会报错。为了达到更好的兼容,最好加一个浏览器及版本判断。

六、本文主要描述各种类名对应的动画效果,其他关于wow.js不作过多描述(想描述我也不懂啊 = =)。如有错误,欢迎批评指正。

这篇文章如果帮到了你 打赏
分享到: 更多 (0)
1
如果文章内容或图片资源失效或者您对文章有异议,请留言反馈或点击右下角邮件图标发送邮件说明情况,我们会及时处理,谢谢!
  • 关于一淘app邀请码一淘礼金券的获取和使用详细图文介绍
    大家好, 今天和大家讲一下淘宝旗下一淘app返利平台活动中,一淘邀请码和一淘礼金券的使用方法,以供广大网友阅览,首先歪小胖先讲一下什么是一淘邀请码和一淘礼金券,本文由歪迪资源屋的歪小胖原创未经允许不得转载! 什么是一淘邀请码? 一淘邀请码是...
  • 一淘app输入一淘邀请码领取奖励登录送8元新人大礼包奖励(8元=800集分宝)
    礼金券的领取 1. 下载安装【一淘】app 在各大手机应用中心均可下载或扫码下载 2.  打开app-首页新用户专享-输入红包码【】即可领取8元礼金券,说明一下这个红包码其实就是一个推荐码必需要输入,不输入邀请码一淘不给赠送8元的礼金券,输...
  • VMware Workstation 15 Pro 官方简体中文专业版 + 永久激活密钥
    VMware Workstation 15 Pro 官方简体中文专业版 永久激活密钥 系统要求 支持使用 2011 年或更晚发布的处理器 (CPU) 的系统,但以下系统除外: 使用基于 2011 年 Bonnell 微架构的 Intel A...
  • 通过Hosts或科学流畅访问谷歌、推特等网站
    通过 Hosts 进行科学上网算是“最原生态”的方法了,不需要任何软件,只要更改一个文件,就能实现,可谓既高效又方便,但hosts目前来说几乎已经无法使用了,只能选择一款稳定长期的服务商来实现了,本文推荐两款绝对牛掰的服务 一、首先给出ho...
  • 一淘邀请码密令是什么 怎么获取一淘礼金券 一淘返利教程
    目前活动是一淘新用户输入邀请码可以获得8元礼金券,满9返8,不需要注册,很好的福利,真真的一键白给,快跟着小编的节奏撸起来 一淘网是什么? 一淘app是淘宝旗下购物返利平台,使用一淘下单购物后,会把商家的返利集分宝发放到你购物的支付宝账户里...
  • 一淘礼金券有什么用?怎么获得一淘app礼金券的详细教程
    目前活动是一淘新用户输入邀请码可以获得8元礼金券,满9返8,不需要注册,很好的福利,真真的一键白给,快跟着小编的节奏撸起来 一淘网是什么? 一淘app是淘宝旗下购物返利平台,使用一淘下单购物后,会把商家的返利集分宝发放到你购物的支付宝账户里...
  • 使用一淘邀请码获得一淘礼金券购物返现每单还有返利 准时到账
    目前活动是一淘新用户输入邀请码可以获得8元礼金券,满9返8,不需要注册,很好的福利,真真的一键白给,快跟着小编的节奏撸起来 一淘网是什么? 一淘app是淘宝旗下购物返利平台,使用一淘下单购物后,会把商家的返利集分宝发放到你购物的支付宝账户里...
  • 一淘的礼金券 一件商品可以使用多张礼金券吗?
    不能, 一淘礼金券的使用需要单笔,系统会自动选择金额最大的礼金券抵扣,不可以使用多张,每笔一张。 一淘礼金券返回是以集分宝形式返还在支付宝,需要确认收货16天到达账户,订单页都会显示集分宝到账时间
  • 一淘APP的新人邀请码是什么?
    一淘网是阿里巴巴旗下官方促销导购平台,通过超高返利、大额红包、超值优惠券等丰富的利益点,为用户提供高性价比的品牌好货,是必不可少的网购省钱利器。 最近一淘APP针对新人有不少的福利,新注册的用户都可以凭下图中的邀请码领取新人专享免单商品,下...
  • 怎么获得一淘礼金券 一淘邀请码:TARY6
    怎么获得一淘礼金券 一淘邀请码:TARY6,一淘app新用户注册领取8元新人大礼包奖励(800集分宝=8元) 礼金券的领取 1. 下载安装【一淘】app 在各大手机应用中心均可下载或扫码下载 2.  打开app-首页新用户专享-输入红包码【...
  • 如何领一淘新人福利 一淘邀请码及详细操作步骤
    礼金券的领取 1. 下载安装【一淘】app 在各大手机应用中心均可下载或扫码下载 2.  打开app-首页新用户专享-输入红包码【】即可领取8元礼金券,说明一下这个红包码其实就是一个推荐码必需要输入,不输入一淘不给赠送8元的礼金券,输入后点...
  • 一淘新人专享福利邀请码礼金券从获取到使用详细教程
    一淘新人专享福利邀请码礼金券从获取到使用详细教程,一淘app新用户注册领取8元新人大礼包奖励(800集分宝=8元) 礼金券的领取 1. 下载安装【一淘】app 在各大手机应用中心均可下载或扫码下载 2.  打开app-首页新用户专享-输入红...

评论 抢沙发



觉得文章有用就赞赏支持一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏