头像雪花效果

在網頁右上角添加雪花效果，帶視差
目前为 2024-12-24 提交的版本。查看最新版本。
换行
// ==UserScript==
// @name         头像雪花效果
// @namespace    http://tampermonkey.net/
// @version      0.11
// @description  在網頁右上角添加雪花效果，帶視差
// @author       Gemini
// @match        *://km.sankuai.com/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // 创建圣诞帽
    const hat = document.createElement('img');
    hat.src = 'https://pic.imgdb.cn/item/676a2824d0e0a243d4e8e167.png'; // 这里使用了一个网络上的圣诞帽图片，你需要替换成你自己的图片或者base64编码
    hat.style.position = 'fixed';
    hat.style.top = '2px';
    hat.style.right = '20px';
    hat.style.width = '20px'; // 限制最大宽度
    hat.style.height = 'auto'; // 高度自适应
    hat.style.transform = 'rotate(5deg)';
    hat.style.pointerEvents = 'none'; // 防止遮挡页面元素
    hat.style.zIndex = '9999';
    document.body.appendChild(hat);

    const snowContainer = document.createElement('div');
    snowContainer.style.position = 'fixed';
    snowContainer.style.top = '0';
    snowContainer.style.right = '0';
    snowContainer.style.width = '60px';
    snowContainer.style.height = '48px';
    snowContainer.style.pointerEvents = 'none';
    snowContainer.style.zIndex = '9999';
    document.body.appendChild(snowContainer);

    const numSnowflakes = 20;
    const depths = [0.5, 0.7, 1.0]; // 視差深度，數字越小速度越慢

    for (let i = 0; i < numSnowflakes; i++) {
        createSnowflake();
    }

    function createSnowflake() {
        const snowflake = document.createElement('div');
        snowflake.style.position = 'absolute';
        snowflake.style.backgroundColor = 'white';
        snowflake.style.borderRadius = '50%';
        snowflake.style.width = Math.random() * 2 + 1 + 'px';
        snowflake.style.height = snowflake.style.width;
        snowflake.style.left = Math.random() * 60 + 'px';
        snowflake.style.top = -10 + 'px';
        snowflake.style.opacity = '1'; // 透明度設為 1
        snowContainer.appendChild(snowflake);

        animateSnowflake(snowflake);
    }

    function animateSnowflake(snowflake) {
        let top = -10;
        let left = parseFloat(snowflake.style.left);
        let depth = depths[Math.floor(Math.random() * depths.length)]; // 隨機選擇一個深度
        let speed = Math.random() * 0.2 + 0.2 * depth; // 根據深度調整速度
        let drift = (Math.random() - 0.2) * 0.2 * depth; // 根據深度調整漂移

        function frame() {
            top += speed;
            left += drift;

            if (top > 48) {
                top = -10;
                left = Math.random() * 60;
                snowflake.style.left = left + 'px';
            }
            if(left < 0){
                left = 0;
                drift = Math.abs(drift);
            }
            if(left > 60){
                left = 60;
                drift = -Math.abs(drift);
            }

            snowflake.style.top = top + 'px';
            snowflake.style.left = left + 'px';
            requestAnimationFrame(frame);
        }

        requestAnimationFrame(frame);
    }
})();
欢迎访问Greasy Fork镜像
