hexo 官方加水波纹特效

发表于 分类于 阅读次数： 本文字数： 1k 阅读时长 ≈ 1 分钟
默认

官方

https://github.com/sirxemic/jquery.ripples

特效样例

https://iiiii.cf

https://sirxemic.github.io/jquery.ripples/

http://home.ustc.edu.cn/~pscgylotti/blogs/

特效插件

https://github.com/sirxemic/jquery.ripples

Butterfly

测试版本butterfly v3.4.0

_config.butterfly.yml对应位置修改

1
2
3
4
5
6
7
YAML
inject:
  head:
  bottom:
    - <script defer src="https://rmt.dogedoge.com/fetch/~/source/jsdelivr/npm/jquery@latest/dist/jquery.min.js"></script>
    - <script defer src="https://cdn.jsdelivr.net/gh/sirxemic/jquery.ripples/dist/jquery.ripples.js"></script>
    - <script defer src="https://iiiii.cf/js/ripples.js"></script>

其他主题

都放在页脚

如果没有jq，必须先引入jq：https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js

主js：https://cdn.jsdelivr.net/gh/sirxemic/jquery.ripples/dist/jquery.ripples.js

配置自己写，可以用我的https://iiiii.cf/js/ripples.js

1
2
3
4
5
6
7
8
9
10
11
12
$(document).ready(function() {
    try {
        $('body').ripples({
            resolution: 512,
            dropRadius: 20, //px
            perturbance: 0.04,
        });
    }
    catch (e) {
        $('.error').show().text(e);
    }
});