本文主要转载自Akilar

点击查看参考教程
参考方向教程原贴
动画样式依赖animate.css
wowjs文档wowjs

插件化版本（推荐）

点击查看参考教程
  1. 安装插件,在博客根目录[Blogroot]下打开终端，运行以下指令：
    1
    npm install hexo-butterfly-wowjs --save

  2. 添加配置信息，以下为写法示例
    在站点配置文件_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
  3. 参数释义
参数备选值/类型释义
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

转载自Akilar的文章，本文仅为记录魔改过程