分享各种网络资源
是我乃至整个互联网的精髓所在
最新消息:开启被动注册模式,详情点击这里,同时接小单,QQ:330733312
 您目前所在位置: 站点首页 » WordPress » WordPress 代码 » 如何给WordPress站点添加wow.js效果
  • +
  • 19
  • 如何给WordPress站点添加wow.js效果

  • 引入相关文件
  • 引入Animate.css
  • 引入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

    添加相关参数并启用

    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 分类描述添加可视化编辑模式

      可视化编辑模式一直是很多人喜欢使用的,但是我个人方面还是喜欢传统的 html 模式,不是别的,主要是自己写的东西通过代码出现的就是自己的,而...

      点击查看
    • 6 款 WordPress 缓存插件对比测试

      6 款 WordPress 缓存插件对比测试

      缓存插件我相信每个站点几乎都是在使用的,插件的原理并不是能提高带宽也不是说能提高页面加载速度等等,仅仅是为了降低服务器的压力,当人群数量大量...

      点击查看
    • WordPress 获取分类第一篇文章第一张图片地址

      WordPress 获取分类第一篇文章第一张图片地址

      这个功能我不知道网络上面有没有相关教程,至少我是没有看到的,所以这里还是简单的说一下,可能其中有不少问题,也可能是我的方法太过复杂,但是还是...

      点击查看
    如何给WordPress站点添加wow.js效果
    3 + 7 =
    1. 8楼
      鱼昆鹏博客
      最后评论时间:2017/04/20 18:37
      来自天朝的朋友 谷歌浏览器 Windows 7 广东省湛江市 电信
      顺便问一下,那个添加相关参数并启用和高级效果是加在哪里的?
      鱼昆鹏博客 2个月前 (04-20)回复
      • 帅气小琦琦
        最后评论时间:2017/06/21 23:09
        来自天朝的朋友 谷歌浏览器 Windows 10 湖北省武汉市 联通
        @鱼昆鹏博客 相关参数添加到主要的JS文件里面,高级功能直接写进div标签里面
        帅气小琦琦    4小时前回复
        • 鱼昆鹏博客
          最后评论时间:2017/04/20 18:37
          来自天朝的朋友 谷歌浏览器 MI 2 Build/LRX22G 广东省广州市 联通
          @帅气小琦琦 :razz: 第一个大概想到了,然而就是还是不知道第二怎么弄
          鱼昆鹏博客 2个月前 (04-20)回复
          • 帅气小琦琦
            最后评论时间:2017/06/21 23:09
            来自天朝的朋友 谷歌浏览器 Windows 10 湖北省武汉市 联通
            @鱼昆鹏博客 默认的div标签书写的方式就是
            这样的,你需要的就是把相关的属性写进div标签,最后得到的就是我展示的了
            帅气小琦琦    4小时前回复
    2. 7楼
      鱼昆鹏博客
      最后评论时间:2017/04/20 18:37
      来自天朝的朋友 谷歌浏览器 Windows 7 广东省湛江市 电信
      那个js的文件地址错了 :twisted: ,我说怎么打不开,地址是https://raw.githubusercontent.com/matthieua/WOW/master/dist/wow.min.js
      鱼昆鹏博客 2个月前 (04-20)回复
    3. 6楼
      动感单车
      最后评论时间:2016/12/12 10:40
      来自天朝的朋友 谷歌浏览器 Windows XP 广西桂林市 电信
      知更鸟的那个特效还是挺酷的,一直相当的喜欢!
      动感单车 6个月前 (12-12)回复
      • 帅气小琦琦
        最后评论时间:2017/06/21 23:09
        来自天朝的朋友 谷歌浏览器 Windows 10 湖北省武汉市 联通
        @动感单车 恩恩 我看了 也尝试过 但是说实话 还是有点心虚 毕竟加载的内容需求较多
        帅气小琦琦    4小时前回复
    4. 5楼
      Biebb技术博客
      最后评论时间:2016/11/28 19:51
      来自天朝的朋友 火狐浏览器 Windows 10 四川省成都市 电信
      又学一招,不错不错
      Biebb技术博客 7个月前 (11-28)回复
    5. 4楼
      握兰网
      最后评论时间:2016/11/28 15:33
      谷歌浏览器 Windows 10 非洲
      不敢折腾了,现在的css文件都飙到100多k了 :cry: :cry:
      握兰网 7个月前 (11-28)回复
    6. 3楼
      企业咨询
      最后评论时间:2016/11/28 15:17
      来自天朝的朋友 火狐浏览器 Windows 7 广东省深圳市 电信
      看的米糊糊
      企业咨询 7个月前 (11-28)回复
    7. 2楼
      WordPress在线商城
      最后评论时间:2016/11/27 23:36
      来自天朝的朋友 谷歌浏览器 Windows 7 四川省成都市 电信
      首页有点乱
      WordPress在线商城 7个月前 (11-27)回复
      • 帅气小琦琦
        最后评论时间:2017/06/21 23:09
        来自天朝的朋友 谷歌浏览器 Windows 10 湖北省武汉市 电信
        @WordPress在线商城 因为是在别人的主题上面修改的 想要修改为CMS主题 但是有点麻烦 所有有点乱套
        帅气小琦琦    4小时前回复
    8. 1楼
      闲鱼
      最后评论时间:2017/06/21 19:10
      来自天朝的朋友 QQ浏览器 Windows 7 湖南省长沙市 电信
      好巧,这几天也在研究animate动画 :smile:
      闲鱼 8小时前回复
      • 帅气小琦琦
        最后评论时间:2017/06/21 23:09
        来自天朝的朋友 谷歌浏览器 Windows 10 湖北省武汉市 联通
        @闲鱼 鉴于要引入的文件太多了 而且原因我文中也说了 所以还是不折腾了
        帅气小琦琦    4小时前回复