动态背景

一直都想加一个动态背景,老样子,还是自己动手,丰衣足食
JQ之家找到一个背景,看起来还可以,添加方式也很简单,无脑操作,js源文件放在本站的cdn上的,1.2KB大小,访问速度不必担心,或者你也可以引用jsdelivr上官方的

<script src="https://cdn.jsdelivr.net/npm/bubbly-bg@1.0.0/dist/bubbly-bg.js"></script>

 

bubbly-bg.js

bubbly-bg.js是一款漂亮的动态气泡背景js插件。bubbly-bg.js基于HTML5 canvas,压缩后的版本小于1kb,但是它能制作出各种漂亮的动态气泡背景效果,非常强大.

 

食用方法

官方使用方法

1.如果你不指定canvas元素作为容器,而是直接在body中初始化插件,那么插件会在body之后创建一个canvas元素,这个元素具有position: fixed 和 z-index: -1属性,对于某些博客站点和网站有些元素还是会显示在上层,比如我的就是,所以引入官方的如果有元素在上层显示,导致显示不正常,就请引入我个性化的,z-index:-30,所以并且它的宽度和高度始终会等于视口的宽度和高度。

<body>
  ...
  <script src="dist/bubbly-bg.js"></script>
  <script>bubbly();</script>
</body>

 
2.也可以指定一个canvas作为动态气泡背景的容器

<canvas id="demo" width="400" height="300"></canvas>

 

博客使用方法

1.其他博客或者网站就在你的footer文件尾部引入下面的代码就可以了

  <script src="//itggg.cn/cdn/bubbly-bg.js"></script>
  <script>bubbly();</script>

加在最后面就可以

 
2.Handsome主题直接在:设置外观-开发者设置-自定义输出body尾部的HTML代码

<script src="//itggg.cn/cdn/bubbly-bg.js"></script>
<script>bubbly({
    colorStart: "#fff4e6",
    colorStop: "#ffe9e4",
    blur: 1,
    compose: "source-over",
    bubbleFunc: () => `hsla(${Math.random() * 50}, 100%, 50%, .3)`
});
</script>

这样就已经添加上了,是不是非常简单,刷新看效果吧

 

配置参数

1.背景默认提供了四个样式可以选择,只需要修改中间响应的参数就可以了,当然颜色你也可以自己改。

蓝色

<script src="//itggg.cn/cdn/bubbly-bg.js"></script>
<script>bubbly();</script>

 
暗红色

<script src="//itggg.cn/cdn/bubbly-bg.js"></script>
<script>bubbly({
    colorStart: "#111",
    colorStop: "#422",
    bubbleFunc: () => `hsla(0, 100%, 50%, ${Math.random() * 0.25})`
});</script>

 
暗紫色

<script src="//itggg.cn/cdn/bubbly-bg.js"></script>
<script>bubbly({
    colorStart: "#4c004c",
    colorStop: "#1a001a",
    bubbleFunc: () => `hsla(${Math.random() * 360}, 100%, 50%, ${Math.random() * 0.25})`
});</script>

 
明黄色

<script src="//itggg.cn/cdn/bubbly-bg.js"></script>
<script>bubbly({
    colorStart: "#fff4e6",
    colorStop: "#ffe9e4",
    blur: 1,
    compose: "source-over",
    bubbleFunc: () => `hsla(${Math.random() * 50}, 100%, 50%, .3)`
});</script>

 
其他可用配置参数如下

bubbly({
    animate: false, // default is true
    blur: 1, // default is 4
    bubbleFunc: () => `hsla(${Math.random() * 360}, 100%, 50%, ${Math.random() * 0.25})`, // default is () => `hsla(0, 0%, 100%, ${r() * 0.1})`)
    bubbles: 100, // default is Math.floor((canvas.width + canvas.height) * 0.02);
    canvas: document.querySelector("#background"), // default is created and attached
    colorStart: "#4c004c", // default is blue-ish
    colorStop: "#1a001a",// default is blue-ish
    compose: "lighter", // default is "lighter"
    shadowColor: "#0ff", // default is #fff
});  

 

动态气球

新增一个动态气球的背景,直接引入下面的JS即可,我自己把背景改为了透明的,如果你想自己修改背景颜色,下载这个 js 然后找到 #e9ebec 这个颜色自行修改就可以了

预览图

<script src="//itggg.cn/cdn/bangbangt.js"></script>
Last modification:December 22, 2020
如果你想请我喝奶茶的话