Sanakey

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

WowScroll动感元素插件

  1.  Home
  2. Text  
    3. Share to：

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的加载，否则会出现部分动画失效的情况。

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

Animate.css

Just-add-water CSS animations

更新

1.1.0

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

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

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

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

版权属于：Sanakey(特殊声明除外)

本文链接：https://keymoe.com/archives/55/

所有原创文章采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可。 您可以自由的转载和修改，但请务必注明文章来源并且不可用于商业目的。

Last modification：November 25th, 2019 at 10:56 pm
© 允许规范转载
如果觉得我的文章对你有用，请随意赞赏

20 comments

  1. JIeJaitt Safari 605.1.15 Mac OS X Lion 10.15.7

    感觉这个元素选择器有点麻烦呀，能加一个选择菜单嘛
    Reply
    1. Sanakey Google Chrome 94.0.4606.81 Windows 10
      @JIeJaitt

      最早确实有做小白点的打算，但是每个人博客用到的选择器不一样，不太好实现，后来想想，都来折腾主题了，了解这一点点css也是必要的知识了。
      Reply
  2. Mr.Tou Google Chrome 91.0.4472.77 Windows 10

    问一下那个动画作用的元素怎么搞，看不懂，纯小白,谢谢！
    Reply
  3. 神月夜 Google Chrome 90.0.4430.212 Windows 10

    感谢分享(๑•̀ㅁ•́ฅ)
    我这有时候会出现文章加载一片白的情况= =
    就是右边图片这样→https://z3.ax1x.com/2021/05/22/gbRnyt.png版本是8.2.0
    Reply
  4. 流年 Google Chrome 78.0.3904.108 Windows 7

    电脑没有效果,然后手机上面可以,但是点击主题的却是有效果,但是点主页之后进文章就没有效果了,大佬这个要怎么解决？
    Reply
    1. Sanakey Google Chrome 87.0.4280.66 Windows 10
      @流年

      建议先排除与其他插件冲突导致问题的可能性，关闭所有其他插件，只开当前插件，看看正不正常，毕竟使用多个插件很容易导致各种冲突。
      Reply
      1. 流年 UC 13.1.6.1399 iPhone 14.2
        @Sanakey

        插件我就用了一个mac的高亮 还有一个也不冲突模版用的最新 7.31的 和模版有关系嘛？
        Reply
        1. Sanakey Google Chrome 87.0.4280.66 Windows 10
          @流年

          要排查问题，除7.31主题和本插件外，其他最好全都不要用。
          Reply
          1. 流年 Google Chrome 69.0.3947.100 Windows 7
            @Sanakey

            已经好了,问题pjax函数回调,把彩色标签的删掉就好了
            Reply
  5. MuYu Google Chrome 81.0.4044.92 Windows 10

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

      你好，抱歉回复晚了，现在你问题解决了吗？我进你博客看好像没这个问题了。
      Reply
  6. 雾绕空山 Safari 605.1.15 Mac OS X Lion 10.15.7

    为什么我使用了pjax，也开启了pjax选项，但是在首次打开首页时候，没有效果，只有点击导航里面的首页才会触发特效
    Reply
  7. 牧濑红莉栖 Google Chrome 66.0.3359.158 Android 9

    开启pjax后就没效果了
    Reply
    1. Sanakey Google Chrome 85.0.4183.102 Windows 10
      @牧濑红莉栖

      请根据博客是否开启了PJAX功能，来设置该插件的PJAX开关。
      Reply
  8. gordsky Google Chrome 69.0.3947.100 Windows 10

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

    Reply
    1. Sanakey Google Chrome 79.0.3945.130 Windows 10
      @gordsky

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

      Reply
      1. gordsky UC 6.2.4098.3 Windows 10
        @Sanakey

        滚动显示正常，还有handsome主题，文章设置个性化标徽。不显示
        Reply
        1. Sanakey Google Chrome 79.0.3945.130 Windows 10
          @gordsky

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

          Reply
          1. gordsky UC 6.2.4098.3 Windows 10
            @Sanakey

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

            Reply
            1. Sanakey Google Chrome 79.0.3945.130 Windows 10
              @gordsky

              不客气，也祝你生活愉快！

              Reply

Leave a Comment

reimu.png