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)
0
如果文章内容或图片资源失效或者您对文章有异议,请留言反馈或点击右下角邮件图标发送邮件说明情况,我们会及时处理,谢谢!
  • wow.js中各种特效对应的类名
    一、(页面在向下滚动的时候,有些元素会产生细小的动画效果。虽然动画比较小,但却能吸引你的注意。) 刚知道wow.js这个插件,之前访问别的网站下拉滚动条会出现各种效果感觉特别神奇,现在自己依葫芦画瓢也能弄出来这种效果了。 虽然效果出来了,但...
  • WordPress网站底部增加蒲公英动态特效教程
    这个特效曾经我也用过很长一段时间,还是比较不错的,喜欢折腾的朋友可以使用一下,下面说一下方法 如果你实在不想折腾直接粘贴一下代码到你的底部文件中吧,注意代码中“图片地址”四个大字哦,将文中图片传到你的服务器中获取图片地址即可 <!--...
  • WordPress自定义后台登录页面的方法
    一成不变的wordpress后台登录界面早已看腻了也用腻了,这篇文章教你改变一下这一成不变的后台登录界面 教程所需的代码已经打包在下面,点击下载就可以了,贴出部分代码: //开始 //登录页面 function custom_login()...
  • 为WordPress添加百度分享按钮侧边悬浮固定效果
    如上图所示,百度分享默认固定在页面左侧边,不管页面向下或者向上滚动,百度分享按钮都会固定悬浮显示; 好了,下面就介绍一下方法吧,其实很简单,在原百度分享代码上添加一段css即可。 1、首先在wordpress后台编辑footer.php文件...
  • WordPress给文章添加百度是否已收录展示和查询功能
    1、编辑主题目录的functions.php文件,在最后一个?>标签前新添如下代码并保存(如没有?>标签,则直接加到最后面): //百度收录展示 function baidu_check($url){ global $wpdb;...
  • WordPress纯代码实现“返回顶部、返回底部、评论”效果
    相信大家对返回顶部、返回底部这些功能已经不陌生了,wordpress上也有很多插件可以实现,也有很多代码方式; 今天我分享的也是以纯代码实现”返回顶部、返回底部、评论”的效果,但是样式跟其他人的可能不同,个人认为比较...
  • 检测自己的WordPress主机是否支持mail邮件功能
    在自己搭建环境或者租用虚拟主机安装wordpress后,经常有人会遇到这样的问题: 为什么在后台注册,WordPress没有给用户发送注册信息的Email? 为什么我已经安装了相关插件,但是WordPress没有给评论者发送新评论通知? 通...
  • 非插件实现WordPress彩色背景标签云
    WordPrss是用wp_tag_cloud函数来调用文章标签的显示边栏小工具标签云列表,默认标签是有自带颜色的,网上也有很多教程改变每个自带标签的颜色。 那如何来给标签加上不同背景色?而不只是改变标签本身的颜色,效果如下图(或看我网站的标...
  • WordPress升级/安装主题插件提示权限不足 输入FTP解决办法
    某些主机或VPS上WordPress更新,或者升级插件或者主题时会提示一个输入FTP信息的页面,然而有时候你明明输入是正确的信息,它还是提示不正确或者再再次的提示输入FTP信息。 解决方案: 方法1:在你的wp-config.php中插入:...
  • 如何彻底移除并关闭WordPress的RSS feed
    WordPress默认开启了feed功能,好处不言而喻,可以方便RSS阅读器进行订阅,让读者及时收到博客的更新信息。但有些博客基本没有人订阅,却有一堆机器人来采集博客的feed,方便了别人复制你的文章不说,还造成了不必要的资源消耗。 阻止采...
  • WordPress 给最新文章和置顶文章添加new和top图标
    wordpress发布文章一般类型是置顶或者在默认正常。如果在置顶文章或者是24小时内最新发布的文章标题加上相应的图标,不仅可以增加美观,也可以提高用户浏览网站的点击率。网上有各种漂亮的图标大家可以自己去搜一下。然后上传网站替换下面代码的图...
  • WordPress评论神器:一键自动填写名称和邮箱等留言表单
    在不同的WordPress博客间穿梭时,填写评论框信息是一件很麻烦的事有木有。每次都要手动填写名称、邮箱、网址信息,太折磨人了。 于是乎就有了这个神器,以后在评论之前使用它就能自动填写相关信息。这个可以大大节省时间,少做无用功。 其实就是在...

评论 抢沙发



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

支付宝扫一扫打赏

微信扫一扫打赏