Универсальный скрипт снегопада для сайтов и форумов 🌃

[Gegam]

Универсальный скрипт снегопада для сайтов и форумов

Добавьте зимнюю атмосферу на ваш сайт или форум с этим красивым и реалистичным скриптом снегопада! Скрипт работает как на обычных веб-сайтах, так и на форумах XenForo, создавая эффект падающего снега, который не мешает пользовательскому взаимодействию и выглядит очень элегантно.

Как установить:

1. Скачайте файл скрипта.
Скачайте файл snow.js и загрузите его в корневую директорию вашего сайта или форума.


2. Добавление скрипта на ваш сайт:

Откройте файл HTML вашего сайта.

Добавьте следующий код перед закрывающим тегом </body>:

<script src="snow.js"></script>

3. Добавление скрипта на форум XenForo:

Войдите в административную панель вашего форума.

Перейдите в Appearance → Templates → PAGE_CONTAINER.

Найдите строку </body> и вставьте перед ней:

<script src="snow.js"></script>

Очистите кэш форума, чтобы изменения вступили в силу.

|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
4. Готово!
Теперь ваш сайт или форум будет украшен красивым снежным эффектом, который автоматически адаптируется под размер экрана и не мешает пользователю.




---

Особенности:

Без ветра: Снежинки падают вертикально, создавая спокойную зимнюю атмосферу.

Реалистичные анимации: Лёгкое мерцание снежинок и плавное изменение их размеров придают эффекту реалистичности.

Оптимизация: Скрипт не нагружает систему и работает плавно как на ПК, так и на мобильных устройствах.

Этот скрипт является моим первым проектом, не судите строго. Я буду рад любым комментариям и предложениям по улучшению. Если у вас возникнут вопросы или пожелания, не стесняйтесь связаться со мной через Telegram @fast_ejje777

Код для кого кто не хочет скачать файл

// Настройки для снежинок const snowSettings = { numFlakes: 300, // Количество снежинок maxSpeed: 2, // Максимальная скорость падения minSize: 1.5, // Минимальный размер снежинок maxSize: 4, // Максимальный размер снежинок glowEffect: true, // Эффект свечения снежинок color: 'rgba(255, 255, 255, 0.9)', // Цвет снежинок }; // Создание canvas const canvas = document.createElement('canvas'); canvas.id = 'snow-canvas'; canvas.style.position = 'fixed'; canvas.style.top = '0'; canvas.style.left = '0'; canvas.style.width = '100%'; canvas.style.height = '100%'; canvas.style.pointerEvents = 'none'; canvas.style.zIndex = '9999'; document.body.appendChild(canvas); const ctx = canvas.getContext('2d'); let snowflakes = []; let width = window.innerWidth; let height = window.innerHeight; canvas.width = width; canvas.height = height; // Создание снежинок function createSnowflakes() { snowflakes = []; for (let i = 0; i < snowSettings.numFlakes; i++) { snowflakes.push({ x: Math.random() * width, // Позиция по горизонтали y: Math.random() * height, // Позиция по вертикали size: Math.random() * (snowSettings.maxSize - snowSettings.minSize) + snowSettings.minSize, // Размер снежинки speed: Math.random() * snowSettings.maxSpeed + 0.5, // Скорость падения opacity: Math.random() * 0.8 + 0.2, // Прозрачность flicker: Math.random() * 2 + 0.5, // Эффект мерцания }); } } // Рисование снежинок function drawSnowflakes() { ctx.clearRect(0, 0, width, height); snowflakes.forEach((flake) => { ctx.beginPath(); ctx.fillStyle = `rgba(255, 255, 255, ${flake.opacity})`; if (snowSettings.glowEffect) { ctx.shadowBlur = 8; ctx.shadowColor = 'white'; } else { ctx.shadowBlur = 0; } ctx.arc(flake.x, flake.y, flake.size, 0, Math.PI * 2); ctx.fill(); }); } // Обновление снежинок function updateSnowflakes() { snowflakes.forEach((flake) => { flake.y += flake.speed; // Снежинки падают вниз flake.opacity = 0.5 + Math.sin(flake.y / 50) * 0.5; // Эффект плавного мерцания // Возвращаем снежинку наверх экрана, если она достигла низа if (flake.y > height) { flake.y = -flake.size; flake.x = Math.random() * width; // Новая случайная позиция } }); } // Анимация function animateSnow() { drawSnowflakes(); updateSnowflakes(); requestAnimationFrame(animateSnow); } // Подгонка canvas под изменение окна window.addEventListener('resize', () => { width = window.innerWidth; height = window.innerHeight; canvas.width = width; canvas.height = height; createSnowflakes(); }); // Запуск createSnowflakes(); animateSnow();
Вот пример с телефона

Если вам понравилось скрипт лайк ком

 

[Vladislav Nekrasov]

файл скрипта забыл приложить

 

[Gegam]

файл скрипта забыл приложить

Вот Скрипт 🫡

 

[JustAlex]

всё работает
P.S. код лучше брать под тег "Код"

 

[Gegam]

всё работает
P.S. код лучше брать под тег "Код"

Спасибо