卡片添加Wowjs动画

点击查看卡片添加Wowjs动画教程
  1. 安装插件,在博客根目录[Blogroot]下打开终端，运行以下指令：
    1
    npm install hexo-butterfly-wowjs --save
  2. 在[Blogroot]\_config.butterfly.yml中添加Wowjs配置项
    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

  1. 新建[Blogroot]\themes\butterfly\source\js\custom\wow_init.js，配置特性动画的默认项

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    // 给首页文章卡片套上动画
    var arr = document.getElementsByClassName("recent-post-item");
    for(var i = 0;i<arr.length;i++){
        arr[i].classList.add("wow"); //必要项，添加wow.js标记
        arr[i].classList.add("animate__zoomIn"); //必要项，添加样式动画
      }
    // 给侧栏卡片套上动画
    var arr = document.getElementsByClassName("card-widget");
    for(var i = 0;i<arr.length;i++){
        arr[i].classList.add("wow");
        arr[i].classList.add("animate__slideInRight");
      }
    //初始化函数
    wow = new WOW({
      boxClass: 'wow',
      // 当用户滚动时显示隐藏框的类名称
      animateClass: 'animate__animated',
      // 触发 CSS 动画的类名称（动画库默认为"animate.css"库）
      offset: 0,
      // 定义浏览器视口底部与隐藏框顶部之间的距离。
      // 当用户滚动并到达此距离时，将显示隐藏的框。
      mobile: true,
      // 在移动设备上打开/关闭wow.js。
      live: true
      // 在页面上检查新的 wow.js元素。
    })
    wow.init();

  2. 修改[Blogroot]\_config.butterfly.yml的inject配置项，添加样式资源

    1
    2
    3
    4
    5
    6
    inject:
      head:
        - <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" media="defer" onload="this.media='all'">
      bottom:
        - <script defer src="https://cdn.jsdelivr.net/gh/graingert/wow@1.3.0/dist/wow.min.js"></script>
        - <script defer data-pjax src="/js/custom/wow_init.js"></script>