魔改步骤
安装插件,在博客根目录
[Blogroot]
下打开终端,运行以下指令:1
npm install hexo-butterfly-wowjs --save
添加配置信息,以下为写法示例
在站点配置文件 _config.yml 或者主题配置文件 _config.butterfly.yml 中添加1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16wowjs:
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参数释义
参数 备选值 / 类型 释义 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 【可选】动画重复的次数 animate_css URL 【可选】animate.css 的 CDN 链接,默认为 https://npm.elemecdn.com/hexo-butterfly-wowjs/lib/animate.min.css wow_js URL 【可选】wow.min.js 的 CDN 链接,默认为 https://npm.elemecdn.com/hexo-butterfly-wowjs/lib/wow.min.js wow_init_js URL 【可选】wow_init.js 的 CDN 链接,默认为 https://npm.elemecdn.com/hexo-butterfly-wowjs/lib/wow_init.js
外挂标签用法
1 | {% wow [animete],[duration],[delay],[offset],[iteration] %} |
animate
: 动画样式,效果详见 animate.css 参考文档duration
: 选填项,动画持续时间,单位可以是 ms 也可以是 s。例如 3s,700ms。delay
: 选填项,动画开始的延迟时间,单位可以是 ms 也可以是 s。例如 3s,700ms。offset
: 选填项,开始动画的距离(相对浏览器底部)iteration
: 选填项,动画重复的次数
注意,后面四个虽然是选填项,但是当有跨位选填时,次序不能乱。详见示例。
支持嵌套其他外挂标签。
flip 动画效果。
flip动画效果。
zoomIn 动画效果,持续 5s,延时 5s,离底部 100 距离时启动,重复 10 次。
zoomIn 动画效果,持续 5s,延时 5s,离底部 100 距离时启动,重复 10 次
slideInRight 动画效果,持续 5s,延时 5s。
heartBeat 动画效果,延时 5s,重复 10 次。
heartBeat 动画效果,延时 5s,重复 10 次。
flip 动画效果。
1
2
3
4
5{% wow animate__flip %}
{% note success modern%}
flip 动画效果。
{% endnote %}
{% endwow %}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 %}slideInRight 动画效果,持续 5s,延时 5s。
1
2
3
4
5{% wow animate__slideInRight,5s,5s %}
{% note warning modern%}
slideInRight 动画效果,持续 5s,延时 5s。
{% endnote %}
{% endwow %}heartBeat 动画效果,延时 5s,重复 10 次。
1
2
3
4
5{% wow animate__heartBeat,,5s,,10 %}
{% note danger modern%}
heartBeat 动画效果,延时 5s,重复 10 次。
{% endnote %}
{% endwow %}
本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Cyan!
评论
您无需删除空行,直接评论以获取最佳展示效果