在Butterfly中添加wow.js制作能够响应鼠标滚动的动画

虽然我用不到这么花里胡哨的东西，但是好东西一定要分享出来（万一以后我要用到呢

inject

在配置文件themes/butterfly/_config.yml中的inject配置项按照格式填写内容。

1
2
3
4
5
6

inject:
  head:
	  - <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/animate-css/animate.css@3.7.2/animate.min.css">
  bottom:
	  - <script src="https://cdn.jsdelivr.net/gh/graingert/wow@1.3.0/dist/wow.min.js"></script>
	  - <script>new WOW().init();</script>

添加动画

wow.js的使用方法非常简单

demo

文档

例如添加最简单的bounceInUp为例，根据文档我们知道：

1
2
3

<div class="wow bounceInUp">
	Content to Reveal Here
</div>

就可以了，那么我们该怎么添加呢。首先找到需要添加的部分对应的pug文件，例如首页文章卡片recent-post-item对应的文件在themes/butterfly/layout/includes/mixins/post-ui.pug，我们将recent-post-item按照pug写法在后面加上.wow.bounceInUp。

1
2
3

mixin postUI(posts)
  each article , index in page.posts.data
    recent-post-item.wow.bounceInUp

akilar也提供了一个添加动画的教程，可以参考。

在markdown文章中使用

可以查看ln的教程：markdown html css js 实现文章卡片滚动时从下面弹出

效果如下：

大功告成

你已经成功添加动画！赶快来试试做一个自己的「动（的幅度太大导致像一个变）态博客」吧！