分享各种网络资源
是我乃至整个互联网的精髓所在
 您目前所在位置: 站点首页 » WordPress » 代码 » 如何给WordPress站点添加wow.js效果
+

如何给WordPress站点添加wow.js效果

【文章目录】

如何给WordPress站点添加wow.js效果-BanYuner

今天折腾了以下这个东西,为什么会折腾这个东西呢,因为之前经常逛知更鸟博客,后来一次更新之后,发现知更鸟博客多了一种加载效果,感觉有点像是延迟加载的感觉,但是经过F12之后,其实并不是lazyload,看来仅仅是一种加载效果而已了,但是整体来说效果还是不错的,所以我决定折腾一下。

那么折腾之后虽然成功了,连后台相关设置都已经写了,但是实践的时候,我发现,并不是一个简单的事情,我这里说的不简单就是我不想跟知更鸟博客一样,全部使用slideInUp效果,我想通过后台自定义相关效果,然后对应的版块效果都不一样,那样的话,可能会更加美好。但是根据DUX主题的设计,感觉并没有什么实际意义,原因有三:

  1. 知更鸟主题自带CMS主题,都是以模块的形式展现,添加这个效果给人的感觉很自然,而DUX则无CMS主题,就算现在我写的CMS布局,也算不上CMS主题,所以实践起来困难。
  2. DUX的代码书写方式有点特殊,并不是常规的写法,如果想要按照我自己的想法去做的话,那么工程方面也是比较大的。
  3. 因为现在的CMS布局是自己写的,那么写的时候,并没有一种逻辑,或者说这种逻辑并不是很正规,直接导致我想在想要重新修改,可能还是需要一定的时间的,但是说实话,如果要实现依然是可以的。

废话不多说了,下面开始相关教程:

引入相关文件

wow.js是依赖Animate.css的,那么言外之意就是如果你打算使用这个效果,需要引入一个JS和一个CSS,那么对于速度或者说http请求数有强迫症的用户就要考试考虑是否使用了。

引入代码方面如下:

引入Animate.css

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

相关文件请直接进入官网下载: https://raw.github.com/daneden/animate.css/master/animate.css

引入wow.js文件

<script src="js/wow.min.js"></script>

同样的,相关文件直接进入官网下载:
https://github.com/matthieua/WOW/raw/master/dist/wow.min.js' defer='defer

添加相关参数并启用

wow = new WOW(
{
boxClass:     'wow',      // default
animateClass: 'animated', // default
offset:       0,          // default
mobile:       true,       // default
live:         true        // default
}
)
wow.init();

上面的参数相关介绍如下:

  • boxClass:需要执行动画的元素的 class
  • animateClass:animation.css 动画的 class
  • offset:距离可视区域多少开始执行动画
  • mobile:是否在移动设备上执行动画
  • live:异步加载的内容是否有效

高级效果

这里说的高级效果就是定义这个效果的参数,比如显示时间,显示延迟时间,距离可视区域多远的时候开始执行,以及是否重复动画等等,如下:

data-wow-duration: 动画持续时间,单位:秒
data-wow-delay: 动画延迟时间,单位:秒
data-wow-offset: 距离可视区域多远的时候开始执行
data-wow-iteration: 动画重复次数

那么想要添加上面的这些效果的话,那么整体代码就是如下了:

<div class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s"></div>
<div class="wow slideInRight" data-wow-offset="10"  data-wow-iteration="10"></div>

那么这个教程方面大概就是这样了,但是实现效果期间还是有点问题的,这里我简单的说一下:

  1. 两个引入以及功能参数最好是放在一个文件中,建议添加到index.php中body之前即可,当然footer.php中也可以尝试一下。
  2. 没有使用高级功能的情况下,可能显示效果不是很好,建议添加data-wow-duration=”2s”这个参数到class中去。
  3. animate动画效果可以参考 https://daneden.github.io/animate.css/ 查看,之后进行选择会比较好。

最重要的一点,无论失败与否,请一定要有耐心的排查错误,并且利用F12好好看看错误在哪里,我相信使用起来应该不会很有难度的。

关注我们 打赏 分享此文
微信扫码,关注我们
扫码,支持我
如何给WordPress站点添加wow.js效果
支付宝(点击图片切换)
扫码,支持我
如何给WordPress站点添加wow.js效果
微信(点击图片切换)
扫码,手机看
如何给WordPress站点添加wow.js效果

个人评价:┃草根博主┃站点无技术含量┃文章内容不够吸引人┃转载内容随处可见┃资源均来自网络┃ 分享是我的宗旨,也是这个站点存在意义,分享的东西你现在可能不需要,但是我相信只要在某个时间你需要的时候能在这里找到,那么我就是成功的

 相关推荐

换一批 换一批
  • WordPress搜索只显示标题中含有关键字的文章

    WordPress搜索只显示标题中含有关键字的文章

    今天在知更鸟博客上面看到了这篇文章,整体来说,这个功能在某些方面还是比较有用的,如果说通过标题中的关键字来寻找文章的 ...

    点击查看
  • 如何在WordPress评论中显示更多HTML标签

    如何在WordPress评论中显示更多HTML标签

    我见过很多站点,都可以在评论里面添加各种标签,什么自己加粗,然后添加图片,添加链接等等,当时我个人觉得可能并不适合我 ...

    点击查看
  • WordPress显示一年前当天的文章

    WordPress显示一年前当天的文章

    最开始看到这个功能是在112博客,那个时候看到这个功能的第一感觉可能就是觉得,这个功能不是很实用,可能会增加SQL语句的查 ...

    点击查看
  • 给你的WordPress站点添加一个打印按钮

    给你的WordPress站点添加一个打印按钮

    这个功能很久之前就已经在知更鸟博客上面看到了,但是一直没有想过是什么原理,但是今天无意间发现了一个方法,目前觉得还是 ...

    点击查看
  • WordPress显示一周热评

    WordPress显示一周热评

    WordPress站点如何显示一周热评,我相信还是有很多人都想要知道的,那么这里就简单的说说实现方法了。

    点击查看
  • WordPress 限定显示评论者链接的输出

    WordPress 限定显示评论者链接的输出

    最近从bigfa的相关站点看到了这个更新内容,我个人觉得还是很有用的,对于一些广告用户还是有一定的作用的,毕竟有些时候, ...

    点击查看
  • WordPress文章段落间插入广告

    WordPress文章段落间插入广告

    很久之前就已经在留意这个功能了,但是一直没有找到相关的解决办法,今天我算是找到了这个相关代码。使用这个功能对于我们宣 ...

    点击查看
  • 最轻便的复制页面内容到剪切板的JS:clipboard.js

    最轻便的复制页面内容到剪切板的JS:clipboard.js

    今天早些时候在水煮鱼博客看到了这篇文章,我一开始是想要用到代码方面的,毕竟代码很多时候都是直接复制编辑的,但是后来想 ...

    点击查看
  • WordPress前台显示站点有多少注册用户

    WordPress前台显示站点有多少注册用户

    虽然我的站点目前已经关闭了注册,所有已经注册过的用户已经清理完毕了,这里说声抱歉。那么今天这个文章就是给大家一个方法 ...

    点击查看
  • WordPress添加一个底部漂浮栏

    WordPress添加一个底部漂浮栏

    站点底部添加一个通知栏的作用是起到一个通知或者说增加PV的作用,但是很多时候我们都知道,这种通知可能被人觉得很反感,但 ...

    点击查看
  • WordPress避免手残导致文章意外发布

    WordPress避免手残导致文章意外发布

    有些时候,我们编辑好了文章,但是我们可能并不想发布,但是很多时候,我们就是手残,也就是误发布了,这种事情可能对于博客 ...

    点击查看
  • WordPress评论添加数学验证码

    WordPress评论添加数学验证码

    这个功能很久之前我就在考虑是否添加进去了,但是说实话,我觉得有些时候添加验证码,可能给人的感觉不是很好,所以我就一直 ...

    点击查看

  目前有 10 条评论 其中:访客: 5 条, 博主: 5 条

如何给WordPress站点添加wow.js效果
评分: 6 + 6 =
  • 昵称 (必填)  
  • 邮箱 (必填)
  • 网址 (选填)
  1. 5楼
    又学一招,不错不错
    Biebb技术博客 来自天朝的朋友 火狐浏览器 Windows 10 四川省成都市 电信 6天前Reply
  2. 4楼
    不敢折腾了,现在的css文件都飙到100多k了 :cry: :cry:
    握兰网 谷歌浏览器 Windows 10 非洲 6天前Reply
  3. 3楼
    看的米糊糊
    企业咨询 来自天朝的朋友 火狐浏览器 Windows 7 广东省深圳市 电信 6天前Reply
  4. 2楼
    首页有点乱
    WordPress在线商城 来自天朝的朋友 谷歌浏览器 Windows 7 四川省成都市 电信 6天前Reply
  5. 1楼
    好巧,这几天也在研究animate动画 :smile:
    闲鱼 来自天朝的朋友 QQ浏览器 Windows 7 湖南省长沙市 电信 1周前 (11-26)Reply
    • @闲鱼 鉴于要引入的文件太多了 而且原因我文中也说了 所以还是不折腾了
      帅气小琦琦   来自天朝的朋友 谷歌浏览器 Windows 10 湖北省武汉市 联通 1周前 (11-26)Reply