添加即刻页气泡效果

templates/assets/libs/canvas/bubble.js

@@ -0,0 +1,91 @@
+if (document.querySelector(".author-content.author-content-item.single")) {
+    const canvas = document.createElement("canvas");
+    canvas.id = "header_canvas";
+    canvas.style.position = "absolute";
+    canvas.style.bottom = "0";
+    canvas.width = 844;
+    canvas.height = 346;
+    document.querySelector(".author-content.author-content-item.single").appendChild(canvas);
+    const parent = document.querySelector(".author-content.author-content-item.single").parentNode;
+    parent.className = "thumbnail_canvas";
+    (function () {
+        var canvas,
+                ctx,
+                width,
+                height,
+                bubbles,
+                animateHeader = true;
+        initHeader();
+        function initHeader() {
+            canvas = document.getElementById("header_canvas");
+            window_resize();
+            if (canvas) {
+                ctx = canvas.getContext("2d");
+                //建立泡泡
+                bubbles = [];
+                var num = width * 0.04; //气泡数量
+                for (var i = 0; i < num; i++) {
+                    var c = new Bubble();
+                    bubbles.push(c);
+                }
+                animate();
+            }
+        }
+        function animate() {
+            if (animateHeader) {
+                ctx.clearRect(0, 0, width, height);
+                for (var i in bubbles) {
+                    bubbles[i].draw();
+                }
+            }
+            requestAnimationFrame(animate);
+        }
+        function window_resize() {
+            //canvas铺满窗口
+            //width = window.innerWidth;
+            //height = window.innerHeight;
+
+            //如果需要铺满内容可以换下面这个
+            const panel = document.querySelector(".thumbnail_canvas");
+            if (panel) {
+                width = panel.offsetWidth;
+                height = panel.offsetHeight;
+
+                canvas.width = width;
+                canvas.height = height;
+            }
+        }
+        window.onresize = function () {
+            window_resize();
+        };
+        function Bubble() {
+            var _this = this;
+            (function () {
+                _this.pos = {};
+                init();
+            })();
+            function init() {
+                _this.pos.x = Math.random() * width;
+                _this.pos.y = height + Math.random() * 100;
+                _this.alpha = 0.1 + Math.random() * 0.5; //气泡透明度
+                _this.alpha_change = 0.0002 + Math.random() * 0.0005; //气泡透明度变化速度
+                _this.scale = 0.2 + Math.random() * 0.8; //气泡大小
+                _this.scale_change = Math.random() * 0.002; //气泡大小变化速度
+                _this.speed = 0.1 + Math.random() * 0.4; //气泡上升速度
+            }
+            //气泡
+            this.draw = function () {
+                if (_this.alpha <= 0) {
+                    init();
+                }
+                _this.pos.y -= _this.speed;
+                _this.alpha -= _this.alpha_change;
+                _this.scale += _this.scale_change;
+                ctx.beginPath();
+                ctx.arc(_this.pos.x, _this.pos.y, _this.scale * 10, 0, 2 * Math.PI, false);
+                ctx.fillStyle = "rgba(255,255,255," + _this.alpha + ")";
+                ctx.fill();
+            };
+        }
+    })();
+}

templates/moments.html

@@ -27,6 +27,8 @@
                             </a>
                         </div>
                     </div>
+                    <canvas id="header_canvas" width="1216" height="1871"
+                            style="position: absolute; bottom: 0px;"></canvas>
                 </div>
                 <div id="bber">
                     <section class="timeline page-1">
@@ -82,6 +84,7 @@
         </main>
         <!-- 底部 -->
         <footer th:replace="~{modules/footer :: footer}"></footer>
+        <script async data-pjax src="assets/libs/canvas/bubble.js"></script>
     </div>
 
 </th:block>