Вот простой скрипт для создания анимации снега на странице:

HTML


    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Snow Effect</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background: #1e1e1e; /* Цвет фона */
        }
        canvas {
            position: absolute;
            top: 0;
            left: 0;
            pointer-events: none; /* Позволяет взаимодействовать с элементами под canvas */
        }
        .content {
            position: relative;
            z-index: 1; /* Гарантирует, что элементы остаются поверх canvas */
            color: white;
            text-align: center;
            font-family: Arial, sans-serif;
        }
    </style>
    <canvas id="snowCanvas"></canvas>
    <div class="content">
        <h1>С Новым годом!</h1>
        <a href="#" class="button">Нажми меня</a>
    </div>
    <script src="snow.js"></script>
</body>
</html>

JavaScript (snow.js)


const canvas = document.getElementById('snowCanvas');
const ctx = canvas.getContext('2d');

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

const snowflakes = [];
const maxSnowflakes = 150;

// Создаем снежинки
function createSnowflakes() {
    for (let i = 0; i < maxSnowflakes; i++) {
        snowflakes.push({
            x: Math.random() * canvas.width,
            y: Math.random() * canvas.height,
            radius: Math.random() * 4 + 1,
            speed: Math.random() * 1 + 0.5,
            opacity: Math.random()
        });
    }
}

// Обновляем положение снежинок
function updateSnowflakes() {
    for (let i = 0; i < snowflakes.length; i++) {
        const flake = snowflakes[i];
        flake.y += flake.speed;

        if (flake.y > canvas.height) {
            flake.y = 0;
            flake.x = Math.random() * canvas.width;
        }
    }
}

// Рисуем снежинки
function drawSnowflakes() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    for (let i = 0; i < snowflakes.length; i++) {
        const flake = snowflakes[i];
        ctx.beginPath();
        ctx.arc(flake.x, flake.y, flake.radius, 0, Math.PI * 2);
        ctx.fillStyle = `rgba(255, 255, 255, ${flake.opacity})`;
        ctx.fill();
        ctx.closePath();
    }
}

// Анимация
function animate() {
    updateSnowflakes();
    drawSnowflakes();
    requestAnimationFrame(animate);
}

// При изменении размера окна
window.addEventListener('resize', () => {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    snowflakes.length = 0;
    createSnowflakes();
});

// Инициализация
createSnowflakes();
animate();

Как это работает:

  1. HTML-страница создает <canvas>, который будет использоваться для рисования.
  2. В скрипте создается массив снежинок, каждая из которых имеет координаты, радиус, скорость и прозрачность.
  3. В функции animate() обновляется положение снежинок и они перерисовываются на каждом кадре.
  4. При достижении нижней границы экрана снежинка "возвращается" наверх с новым случайным положением.

Этот скрипт легко настраивается: можно изменить количество снежинок, их размер или скорость.