添加 wowjs特效

使用流程:

  • 首先安装插件:
    npm install hexo-butterfly-wowjs --save
  • 添加配置项
    # wowjs
    # see https://www.npmjs.com/package/hexo-butterfly-wowjs
    wowjs:
      enable: true #控制动画开关。true是打开，false是关闭
      priority: 10 #过滤器优先级
      mobile: false #移动端是否启用，默认移动端禁用
      animateitem:
        - class: recent-post-item #必填项，需要添加动画的元素的class
          style: animate__zoomIn #必填项，需要添加的动画
          duration: 1.5s #选填项，动画持续时间，单位可以是ms也可以是s。例如3s，700ms。
          delay: 200ms #选填项，动画开始的延迟时间，单位可以是ms也可以是s。例如3s，700ms。
          offset: 30 #选填项，开始动画的距离（相对浏览器底部）
          iteration: 1 #选填项，动画重复的次数
        - class: card-widget
          style: animate__zoomIn
          delay: 200ms
        # - class: flink-list-card
        #   style: wowpanels
        - class: flink-list-card
          style: animate__flipInY
          duration: 3s
        - class: flink-list-card
          style: animate__animated
          duration: 3s
        - class: article-sort-item
          style: animate__slideInRight
          duration: 1.5s
        - class: site-card
          style: animate__flipInY
          duration: 3s
        - class: site-card
          style: animate__animated
          duration: 3s
      animate_css: https://cdn.cbd.int/hexo-butterfly-wowjs/lib/animate.min.css
      wow_js: https://cdn.cbd.int/hexo-butterfly-wowjs/lib/wow.min.js
      wow_init_js: https://cdn.cbd.int/hexo-butterfly-wowjs/lib/wow_init.js