Редактор
- Регистрация
- 4 Ноя 2024
- Сообщения
- 298
- Автор темы
- #1
Создаем модификацию шаблона
Шаблон: PAGE_CONTAINER
Ключ модификации: snowflake
Тип поиска: Простая замена
Найти:
Заменить:
Шаблон: PAGE_CONTAINER
Ключ модификации: snowflake
Тип поиска: Простая замена
Найти:
Код:
</head>
Код:
<script>
const createSnow = () => {
const snowflake = document.createElement("div");
snowflake.classList.add("snowflake");
snowflake.style.left = Math.random() * 100 + "vw"; // Позиция по ширине
snowflake.style.animationDuration = Math.random() * 3 + 2 + "s"; // Скорость падения
snowflake.style.opacity = Math.random(); // Прозрачность
snowflake.style.width = snowflake.style.height = Math.random() * 5 + 2 + "px"; // Размер снежинки
document.body.appendChild(snowflake);
// Удаляем снежинку после падения
setTimeout(() => {
snowflake.remove();
}, 5000);
};
setInterval(createSnow, 50);
</script>
<style>
.snowflake
{
position: fixed;
top: 0;
background-color: white; /* Цвет снежинки */
border-radius: 50%; /* Круглая форма */
pointer-events: none; /* Не мешает взаимодействию с сайтом */
animation: fall linear infinite; /* Анимация падения */
z-index: 1000;
}
@keyframes fall
{
to
{
transform: translateY(100vh); /* Путь падения */
}
}
</style>
$0