Новогодние снежинки на сайт 🎄
Простой код на JavaScript, добавляющий в правый нижний угол кнопку включения/отключения падения снежинок на странице. Добавляет новогоднее настроение посетителям вашего сайта.
Код, указанный ниже, распространяется свободно и может использоваться где угодно. Автор благодарит за использование и надеется, что он будет полезен!
Пример кода
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Snowfall Toggle</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
background: linear-gradient(to bottom, #1e3c72, #2a5298); /* Фон для снега */
color: white;
font-family: Arial, sans-serif;
height: 100vh;
}
#snowButton {
position: fixed;
bottom: 20px;
right: 20px;
font-size: 2rem;
cursor: pointer;
z-index: 1000;
background: rgba(255, 255, 255, 0.8);
border: none;
border-radius: 50%;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
transition: background 0.3s, color 0.3s;
}
#snowButton.active {
background: rgba(0, 128, 255, 0.8);
color: white;
}
</style>
</head>
<body>
<button id="snowButton">❄</button>
<script>
// Получаем кнопку
const snowButton = document.getElementById('snowButton');
// Переменная для контроля состояния снега
let snowing = false;
let snowInterval;
// Функция создания снежинок
function createSnowflake() {
const snowflake = document.createElement('div');
snowflake.innerHTML = '❄';
snowflake.style.position = 'absolute';
snowflake.style.top = '-50px';
snowflake.style.left = Math.random() * window.innerWidth + 'px';
snowflake.style.fontSize = Math.random() * 20 + 10 + 'px';
snowflake.style.opacity = Math.random();
snowflake.style.color = 'white';
snowflake.style.pointerEvents = 'none';
document.body.appendChild(snowflake);
const fallDuration = Math.random() * 5 + 5;
snowflake.style.transition = `transform ${fallDuration}s linear, opacity ${fallDuration}s linear`;
requestAnimationFrame(() => {
snowflake.style.transform = `translateY(${window.innerHeight + 50}px)`;
snowflake.style.opacity = '0';
});
setTimeout(() => {
snowflake.remove();
}, fallDuration * 1000);
}
// Функция управления снегом
function toggleSnowfall() {
if (snowing) {
clearInterval(snowInterval);
snowButton.classList.remove('active');
} else {
snowInterval = setInterval(createSnowflake, 200);
snowButton.classList.add('active');
}
snowing = !snowing;
}
// Привязываем функцию к кнопке
snowButton.addEventListener('click', toggleSnowfall);
</script>
</body>
</html>
