文章转载自 Akilarの糖果屋，如有侵权，请联系作者，本站仅当学习使用。

魔改步骤

  1. 安装插件，在博客根目录 [Blogroot] 下打开终端，运行以下指令：
1
npm install hexo-butterfly-wowjs --save
  1. 添加配置信息，以下为写法示例
    在站点配置文件 _config.yml 或者主题配置文件 _config.butterfly.yml 中添加
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
wowjs:
  enable: true #控制动画开关。true是打开，false是关闭
  priority: 10 #过滤器优先级
  mobile: false #移动端是否启用，默认移动端禁用
  animateitem:
    - class: recent-post-item #必填项，需要添加动画的元素的class
      style: animate__zoomIn #必填项，需要添加的动画
      duration: 2s #选填项，动画持续时间，单位可以是ms也可以是s。例如3s，700ms。
      delay: 1s #选填项，动画开始的延迟时间，单位可以是ms也可以是s。例如3s，700ms。
      offset: 100 #选填项，开始动画的距离（相对浏览器底部）
      iteration: 2 #选填项，动画重复的次数
    - class: card-widget
      style: animate__zoomIn
animate_css: https://npm.elemecdn.com/hexo-butterfly-wowjs/lib/animate.min.css
wow_js: https://npm.elemecdn.com/hexo-butterfly-wowjs/lib/wow.min.js
wow_init_js: https://npm.elemecdn.com/hexo-butterfly-wowjs/lib/wow_init.js
  1. 参数释义
参数备选值 / 类型释义
enabletrue/false【必选】控制开关
prioritynumber【可选】过滤器优先级，数值越小，执行越早，默认为 10，选填
mobiletrue/false控制移动端是否启用，默认移动端禁用
animateitem.classclass【可选】添加动画类名，只支持给 class 添加
animateitem.styletext【可选】动画样式，具体类型参考 animate.css
animateitem.durationtime, 单位为 s 或 ms【可选】动画持续时间，单位可以是 ms 也可以是 s。例如 3s，700ms。
animateitem.delaytime, 单位为 s 或 ms【可选】动画开始的延迟时间，单位可以是 ms 也可以是 s。例如 3s，700ms。
animateitem.offsetnumber, 单位为 px【可选】开始动画的距离（相对浏览器底部）
animateitem.iterationnumber, 单位为 s 或 ms【可选】动画重复的次数
animate_cssURL【可选】animate.css 的 CDN 链接，默认为 https://npm.elemecdn.com/hexo-butterfly-wowjs/lib/animate.min.css
wow_jsURL【可选】wow.min.js 的 CDN 链接，默认为 https://npm.elemecdn.com/hexo-butterfly-wowjs/lib/wow.min.js
wow_init_jsURL【可选】wow_init.js 的 CDN 链接，默认为 https://npm.elemecdn.com/hexo-butterfly-wowjs/lib/wow_init.js

外挂标签用法

1
2
3
{% wow [animete],[duration],[delay],[offset],[iteration] %}
内容
{% endwow %}
  1. animate: 动画样式，效果详见 animate.css 参考文档
  2. duration: 选填项，动画持续时间，单位可以是 ms 也可以是 s。例如 3s，700ms。
  3. delay: 选填项，动画开始的延迟时间，单位可以是 ms 也可以是 s。例如 3s，700ms。
  4. offset: 选填项，开始动画的距离（相对浏览器底部）
  5. iteration: 选填项，动画重复的次数

注意，后面四个虽然是选填项，但是当有跨位选填时，次序不能乱。详见示例。
支持嵌套其他外挂标签。

  1. flip 动画效果。

    flip动画效果。

  2. zoomIn 动画效果，持续 5s，延时 5s，离底部 100 距离时启动，重复 10 次。

    zoomIn动画效果，持续5s，延时5s，离底部100距离时启动，重复10次

  3. slideInRight 动画效果，持续 5s，延时 5s。

    slideInRight动画效果，持续5s，延时5s。

  4. heartBeat 动画效果，延时 5s，重复 10 次。

    heartBeat动画效果，延时5s，重复10次。

  1. flip 动画效果。

    1
    2
    3
    4
    5
    {% wow animate__flip %}
    {% note success modern%}
    `flip`动画效果。
    {% endnote %}
    {% endwow %}

  2. zoomIn 动画效果，持续 5s，延时 5s，离底部 100 距离时启动，重复 10 次。

    1
    2
    3
    4
    5
    {% wow animate__zoomIn,5s,5s,100,10 %}
    {% note info modern%}
    `zoomIn`动画效果，持续`5s`，延时`5s`，离底部`100`距离时启动，重复`10`次
    {% endnote %}
    {% endwow %}

  3. slideInRight 动画效果，持续 5s，延时 5s。

    1
    2
    3
    4
    5
    {% wow animate__slideInRight,5s,5s %}
    {% note warning modern%}
    `slideInRight`动画效果，持续`5s`，延时`5s`。
    {% endnote %}
    {% endwow %}

  4. heartBeat 动画效果，延时 5s，重复 10 次。

    1
    2
    3
    4
    5
    {% wow animate__heartBeat,,5s,,10 %}
    {% note danger modern%}
    `heartBeat`动画效果，延时`5s`，重复`10`次。
    {% endnote %}
    {% endwow %}