首页 新闻 会员 周边

博客雪花特效

0
悬赏园豆:180 [已解决问题] 解决于 2023-02-28 19:39

大佬我想请教一下这个博客的雪花飘落特效是怎么做的,我查了网上的资料,照着做,但是雪花上半部分会被背景挡住,怎么让它在背景图层顶部出现

jesion_wang的主页 jesion_wang | 初学一级 | 园豆:40
提问于:2023-02-24 21:37
< >
分享
最佳答案
1

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
body {
width: 100%;
height: 100%;
padding:0px;
margin:0px;
}
</style>
</head>
<body>
<canvas id="Snow" style="width:100%;height:100%;"></canvas>
<script type="text/javascript">
(function () {
var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame ||
function (callback) {
window.setTimeout(callback, 1000 / 60);
};
window.requestAnimationFrame = requestAnimationFrame;
})();

    (function () {
        var flakes = [],
            canvas = document.getElementById("Snow"), //画布ID,与上一步创建的画布对应
            ctx = canvas.getContext("2d"),
            flakeCount = 30,  //雪花数量,数值越大雪花数量越多
            mX = -100,
            mY = -100;

        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        function snow() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            for (var i = 0; i < flakeCount; i++) {
                var flake = flakes[i],
                    x = mX,
                    y = mY,
                    minDist = 150,  //雪花距离鼠标指针的最小值,小于这个距离的雪花将受到鼠标的排斥
                    x2 = flake.x,
                    y2 = flake.y;

                var dist = Math.sqrt((x2 - x) * (x2 - x) + (y2 - y) * (y2 - y)),
                    dx = x2 - x,
                    dy = y2 - y;

                if (dist < minDist) {
                    var force = minDist / (dist * dist),
                        xcomp = (x - x2) / dist,
                        ycomp = (y - y2) / dist,
                        deltaV = force / 2;

                    flake.velX -= deltaV * xcomp;
                    flake.velY -= deltaV * ycomp;

                } else {
                    flake.velX *= .98;
                    if (flake.velY <= flake.speed) {
                        flake.velY = flake.speed
                    }
                    flake.velX += Math.cos(flake.step += .05) * flake.stepSize;
                }

                ctx.fillStyle = "rgba(0,255,255," + flake.opacity + ")";  //雪花颜色
                flake.y += flake.velY;
                flake.x += flake.velX;

                if (flake.y >= canvas.height || flake.y <= 0) {
                    reset(flake);
                }

                if (flake.x >= canvas.width || flake.x <= 0) {
                    reset(flake);
                }

                ctx.beginPath();
                ctx.arc(flake.x, flake.y, flake.size, 0, Math.PI * 2);
                ctx.fill();
            }
            requestAnimationFrame(snow);
        };

        function reset(flake) {
            flake.x = Math.floor(Math.random() * canvas.width);
            flake.y = 0;
            flake.size = (Math.random() * 3) + 8;  //加号后面的值,雪花大小,为基准值,数值越大雪花越大
            flake.speed = (Math.random() * 1) + 1;  //加号后面的值,雪花速度,为基准值,数值越大雪花速度越快
            flake.velY = flake.speed;
            flake.velX = 0;
            flake.opacity = (Math.random() * 0.5) + 0.3;  //加号后面的值,为基准值,范围0~1
        }

        function init() {
            for (var i = 0; i < flakeCount; i++) {
                var x = Math.floor(Math.random() * canvas.width),
                    y = Math.floor(Math.random() * canvas.height),
                    size = (Math.random() * 3) + 8,  //加号后面的值,雪花大小,为基准值,数值越大雪花越大
                    speed = (Math.random() * 1) + 1,  //加号后面的值,雪花速度,为基准值,数值越大雪花速度越快
                    opacity = (Math.random() * 0.5) + 0.3;  //加号后面的值,为基准值,范围0~1

                flakes.push({
                    speed: speed,
                    velY: speed,
                    velX: 0,
                    x: x,
                    y: y,
                    size: size,
                    stepSize: (Math.random()) / 30 * 1,  //乘号后面的值,雪花横移幅度,为基准值,数值越大雪花横移幅度越大,0为竖直下落
                    step: 0,
                    angle: 180,
                    opacity: opacity
                });
            }

            snow();
        };

        document.addEventListener("mousemove", function (e) {
            mX = e.clientX,
                mY = e.clientY
        });
        window.addEventListener("resize", function () {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
        });
        init();
    })();
</script>

</body>
</html>

收获园豆:120
lf03 | 小虾三级 |园豆:502 | 2023-02-27 09:39

我試了一下是可以的 可能是你沒有調好畫布的大小

lf03 | 园豆:502 (小虾三级) | 2023-02-27 09:41

可是画布不是直接用 canvas.width = window.innerWidth;
canvas.height = window.innerHeight;获取吗,该怎么调

jesion_wang | 园豆:40 (初学一级) | 2023-02-27 19:03

@jesion_wang: 是的 那是設置畫布大小 <canvas id="Snow"></canvas> 直接這樣就可以了

lf03 | 园豆:502 (小虾三级) | 2023-02-28 11:41
其他回答(1)
0

z-index:100000;

收获园豆:60
lzhdim | 园豆:630 (小虾三级) | 2023-02-26 20:31


不行

支持(0) 反对(0) jesion_wang | 园豆:40 (初学一级) | 2023-02-26 21:46

@jesion_wang:

搜一下那个背景,查看它的z-index是多少,比它多1就行,哈哈。

支持(0) 反对(0) lzhdim | 园豆:630 (小虾三级) | 2023-02-26 21:57

@jesion_wang:

你看我博客的飘叶效果,在最前端啊,就是设置的z-index。。。

支持(0) 反对(0) lzhdim | 园豆:630 (小虾三级) | 2023-02-26 22:09

@lzhdim: 不知道是不是窗口设置的问题。。
https://files.cnblogs.com/files/blogs/784441/snow.js?t=1677246190

支持(0) 反对(0) jesion_wang | 园豆:40 (初学一级) | 2023-02-26 23:34
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册