Пользователь
- Регистрация
- 17 Июл 2024
- Сообщения
- 100
- Автор темы
- #1
Универсальный скрипт снегопада для сайтов и форумов
Добавьте зимнюю атмосферу на ваш сайт или форум с этим красивым и реалистичным скриптом снегопада! Скрипт работает как на обычных веб-сайтах, так и на форумах 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
Код для кого кто не хочет скачать файл
Вот пример с телефона
Если вам понравилось скрипт лайк ком
Добавьте зимнюю атмосферу на ваш сайт или форум с этим красивым и реалистичным скриптом снегопада! Скрипт работает как на обычных веб-сайтах, так и на форумах 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();Вот пример с телефона
Если вам понравилось скрипт лайк ком
