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
如果觉得我的文章对你有用,请随意赞赏

6 comments

  1. gordsky     Windows 10 /    Google Chrome

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

    1. Sanakey     Windows 10 /    Google Chrome
      @gordsky

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

      1. gordsky     Windows 10 /    UC浏览器
        @Sanakey

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

        1. Sanakey     Windows 10 /    Google Chrome
          @gordsky

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

          1. gordsky     Windows 10 /    UC浏览器
            @Sanakey

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

            1. Sanakey     Windows 10 /    Google Chrome
              @gordsky

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

Leave a Comment

kotori.png