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

本文简介 一、(页面在向下滚动的时候,有些元素会产生细小的动画效果。虽然动画比较小,但却能吸引你的注意。) 刚知道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不作过多描述(想描述我也不懂啊 = =)。如有错误,欢迎批评指正。

这篇文章如果帮到了你
如果文章内容或图片资源失效或者您对文章有异议,请留言反馈或点击右下角邮件图标发送邮件说明情况,我们会及时处理,谢谢!
wow.js中各种特效对应的类名2018-12-25 23:32:54阅读数 1151
一、(页面在向下滚动的时候,有些元素会产生细小的动画效果。虽然动画比较小,但却能吸引你的注意。) 刚知道wow.js这个插件,之前访问别的网站下拉滚动条会出现各种效果感觉特别神奇,现在自己依葫芦画瓢也能弄出来这种效果了。 虽然效果出来了,但...
原创wordpress给主题调用今日(最近24小时)最新发布文章数量2020-03-08 14:28:28阅读数 1605
其实标题中写着调用今日最新发布文章数量是不准确的,因为1天为24小时,调用只能按时刻调用24小时,它的计数方式是以当前时间为准,所以是调用当前时间向前推24才对,不必计较了,因为时间依然在往后推移呀。。。 获取最近24小时发布的文章数 /*...
转载qqoq3.0主题免费分享(破解版)分享2020-03-05 14:48:08阅读数 202
本主题为qqoq3.0破解版,此主题特色就是视频了,其他的在歪主题看来也就那样子,歪主题拿到qqoq3.0版本主题后,测试再三,发现很多问题,但并不影响正常使用所以之修复了一个视频不能显示和播放的问题(视频空白),其他一些小的改动也就不用再...
原创wordpress顶和踩喜欢功能的实现2020-02-20 16:28:48阅读数 315
顶踩功能大家都知道,不用多解释,本文介绍使用代码实现顶踩功能详细步骤 首先创建数据表 /*********更新重写规则***************/ function ashu_load_theme() { global $pagenow...
WordPress在文章列表插入一篇广告跳转文章或在任意位置插入广告代码2019-03-11阅读数 1467
这个Wordpress技巧可以让你在文章列表中的任意位置插入一篇或多篇广告跳转文章,完美的与主题结构融合,与主题列表的展现形式一模一样,不用去额外的改变任何结构!而且可以一键无痕的将发布的任何文章变成广告跳转文章! 实现过程非常简单,利用了...
Justnews主题4.0.4破解版包含qapress2.3.1问答插件WordPress主题Justnews破解版2019-03-10 15:03:41阅读数 5911
不知道有需要的小伙伴吗? 你如果需要这个主题 点击查看这里  歪迪资源屋不负责这个主题的发货和服务支持,谁给你发货你找谁就可以了,我们只是这篇文章的搬运工而已! 主题简介 这个就不具体复制过来了,本主题是4.0.4版本的包含问答插件 主题截...
wordpress给你的网页添加一个加载动画2019-01-29 23:29:45阅读数 2429
网页加载需要一个过程,现在这个过程可以极短了,不过有些朋友还是希望能用一个动画来代替这个过程,让加载不再那么枯燥。搜索了一下,很多这类文章,方法很多,利用CSS实现应该是最好的办法了。过程很简单,只需两步。 添加方法 第一步 创建一个css...
WordPress插件-Post Expirator 给文章或页面设置一个到期时间2019-01-29 22:57:01阅读数 1172
有些时候,一些文章或页面没必要始终展示,比如公告,活动,广告等,但是对于像我一样的懒人们又不想拐回去关闭文章,或者忘记关闭文章。这是你就需要这样一个插件。 Post Expirator 这个插件使用起来比较简单,功能也够强大,可以为文章或者...
代码实现网站外链自动转换为内链2019-01-20 16:38:04阅读数 2257
实现步骤: 首先复制以下代码,添加到主题目录下的function.php文件中 /*  *自动给文章的外部链接添加nofollow属性  */    add_filter('the_content','web589_the_content_...
DUX主题文章页相关推荐双栏显示2019-01-07阅读数 1248
DUX主题是themebetter原创开发的一款基于WordPress程序的多功能主题,响应式布局,不同设备不同展示效果,简洁大气  ,多设备支持、优化SEO,适用于垂直站点、科技博客、个人站,目前我站点使用的就是DUX主题,作为一个喜欢折...
纯代码实现WordPress文章页展开收缩功能2019-01-07 22:35:44阅读数 1247
网上关于实现文章内容“展开/收缩”效果的方法有很多,但是有很多代码似乎已经不可用,而另一些虽然可用但是前端显示效果不怎么美观,于是我便根据网上的一些代码进行了些许的改动便有了这篇文章。下面我们就来具体了解下如何实现文章内容的“展开/收缩”功...
为亮点功能添加快捷按钮2019-01-07 22:32:37阅读数 1024
其实该功能主要是通过 CSS 样式的调整来实现的,实现方式虽然简单但是前端显示效果确实不错,官方给出的调用方式也极其简单,通过下面两行代码调用: <ol class="liangdian"> <li><stro...

评论 抢沙发



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

支付宝扫一扫打赏

微信扫一扫打赏