Sanakey

WowScroll动感元素插件
WowScroll动感元素插件
扫描右侧二维码阅读全文
05
2019/11

WowScroll动感元素插件

WowScroll动感元素插件

这是一款基于wow.js开发的元素动画插件,主要功能就是给元素添加好看的入场动画。当滚动条第一次滚到元素位置时,会触发一次这个动画。预览效果请参考本博客。

用法

插件本体

首先前往github下载插件

点击右上角绿色的Clone or download按钮,Download ZIP, 解压文件。

食用步骤

  • 重命名文件夹为WowScroll
  • WowScroll文件夹上传至typecho的插件usr/plugins目录
  • 登录后台启用WowScroll插件即可正确食用

配置说明

正确启用插件后,首先需要设置动画作用的元素,请用css选择器语法在框内填写你要添加动画的元素。
比如我想让handsome主题首页的文章出现初次加载动画,可以输入#post-panel .panel
本插件支持输入多个选择器,使用时请用半角逗号,隔开。比如#post-panel .panel, h2,这样文章和所有h2标签都会添加入场动画。

目前插件使用的animate.css版本是3.7.2,如果你未加载过或者使用的版本低于3.7.2,请开启animate.css的加载。

handsome主题内置的animate版本较低,建议插件配置开启animate.css的加载,否则会出现部分动画失效的情况。

关于动画的种类与预览效果,可以前往此处查看

更新

1.1.0

  • 添加完全随机动画模式
  • 添加统一随机动画模式

选择完全随机动画模式时,添加动画的每一个元素都有单独的随机的动画效果

选择统一随机动画模式时,添加动画的每一个元素都有统一的随机的动画效果

使用过程出现问题或者有什么好的建议,请在github提交issue或留言区留言。

Last modification:November 25th, 2019 at 10:56 pm
如果觉得我的文章对你有用,请随意赞赏

12 comments

  1. 流年 Google Chrome 78.0.3904.108 Windows 7

    电脑没有效果,然后手机上面可以,但是点击主题的却是有效果,但是点主页之后进文章就没有效果了,大佬这个要怎么解决?

  2. MuYu Google Chrome 81.0.4044.92 Windows 10

    你好,请问下为什么我的是第一次进入有效果。
    点击文章或者其他页面就没效果了,开启了PJAX。
    插件各种设置都调过了,还是一样的结果,在想是不是什么冲突了。

    1. Sanakey Google Chrome 87.0.4280.66 Windows 10
      @MuYu

      你好,抱歉回复晚了,现在你问题解决了吗?我进你博客看好像没这个问题了。

  3. 雾绕空山 Safari 605.1.15 Mac OS X Lion 10.15.7

    为什么我使用了pjax,也开启了pjax选项,但是在首次打开首页时候,没有效果,只有点击导航里面的首页才会触发特效

  4. 牧濑红莉栖 Google Chrome 66.0.3359.158 Android 9

    开启pjax后就没效果了

    1. Sanakey Google Chrome 85.0.4183.102 Windows 10
      @牧濑红莉栖

      请根据博客是否开启了PJAX功能,来设置该插件的PJAX开关。

  5. gordsky Google Chrome 69.0.3947.100 Windows 10

    反馈个小问题,有时候刷新主页会只显示一篇文章

    1. Sanakey Google Chrome 79.0.3945.130 Windows 10
      @gordsky

      主页滚动了还是只显示一篇文章吗?还是说滚动后会正常显示?

      1. gordsky UC 6.2.4098.3 Windows 10
        @Sanakey

        滚动显示正常,还有handsome主题,文章设置个性化标徽。不显示

        1. Sanakey Google Chrome 79.0.3945.130 Windows 10
          @gordsky

          这个应该与handsome主题有关,也许是主题美化了滚动条或平滑滚动带来的冲突问题,我测试不用handsome时是可以正常显示的。
          不过也不算大问题,滚动了可以正常显示,不介意的话还是可以继续使用。

          1. gordsky UC 6.2.4098.3 Windows 10
            @Sanakey

            感谢博主分享!祝您生活愉快!

            1. Sanakey Google Chrome 79.0.3945.130 Windows 10
              @gordsky

              不客气,也祝你生活愉快!

Leave a Comment

reimu.png