Butterfly主题魔改教程，实现首页卡片进入动画。


我的博客主题版本为：hexo5.4、Butterfly3.6.2

如果与我的版本不一样可能会有略微差别，届时请自行百度。

本文参考文章：Akilarの糖果屋的《Add Blog Animation — Wowjs》。

1.参考

参考方向 教程原贴
动画样式依赖 animate.css
wowjs 文档 img
魔改教程 Akilarの糖果屋的《Add Blog Animation — Wowjs》

2.步骤

本博客使用糖果屋教程的插件化版本魔改，更多魔改方式请参考：Akilarの糖果屋的《Add Blog Animation — Wowjs》教程贴。

  1. 安装插件，在博客根目录 [Blogroot] 下打开终端，运行以下指令：

    npm install hexo-butterfly-wowjs --save

  2. 添加配置信息，以下为写法示例
    在站点配置文件_config.yml 或者主题配置文件_config.butterfly.yml 中添加:

    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

  3. 参数释义

参数 备选值 / 类型 释义
enable true/false 【必选】控制开关
priority number 【可选】过滤器优先级，数值越小，执行越早，默认为 10，选填
mobile true/false 控制移动端是否启用，默认移动端禁用
animateitem.class class 【可选】添加动画类名，只支持给 class 添加
animateitem.style text 【可选】动画样式，具体类型参考 animate.css
animateitem.duration time, 单位为 s 或 ms 【可选】动画持续时间，单位可以是 ms 也可以是 s。例如 3s，700ms。
animateitem.delay time, 单位为 s 或 ms 【可选】动画开始的延迟时间，单位可以是 ms 也可以是 s。例如 3s，700ms。
animateitem.offset number, 单位为 px 【可选】开始动画的距离（相对浏览器底部）。
animateitem.iteration number, 单位为 s 或 ms 【可选】动画重复的次数

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动画效果。

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

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

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

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

  1. heartBeat动画效果，延时5s，重复2次。此处注意不用的参数位置要留空，用逗号间隔。

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

  1. flip动画效果。

    {% wow animate__flip %}
    {% note green 'fas fa-fan' modern%}
    `flip`动画效果。
    {% endnote %}
    {% endwow %}

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

    {% wow animate__zoomIn,5s,5s,100,2 %}
    {% note blue 'fas fa-bullhorn' modern%}
    `zoomIn`动画效果，持续`5s`，延时`5s`，离底部`100`距离时启动，重复`2`次
    {% endnote %}
    {% endwow %}

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

    {% wow animate__slideInRight,5s,5s %}
    {% note orange 'fas fa-car' modern%}
    `slideInRight`动画效果，持续`5s`，延时`5s`。
    {% endnote %}
    {% endwow %}

  4. heartBeat动画效果，延时5s，重复2次。此处注意不用的参数位置要留空，用逗号间隔。

    {% wow animate__heartBeat,,5s,,2 %}
    {% note red 'fas fa-battery-half' modern%}
    `heartBeat`动画效果，延时`5s`，重复`2`次。
    {% endnote %}
    {% endwow %}

如有错误，欢迎评论区留言！