Вот и наступил День Восьмое марта!
Хотите удивить вторую половинку, поздравить любимых с Женским днем или просто добавить своему сайту весеннего настроения? Забудьте про скучные баннеры. Сегодня мы заставим ваш браузер кружиться в вальсе розовых лепестков. И для этого не нужны никакие тяжелые библиотеки — только чистый JavaScript, немного магии CSS и ваше желание творить.
Этот эффект часто просят за деньги в веб-студиях, а мы сделаем его бесплатно и красиво. Представьте: заходите вы на сайт, а там... настоящий лепесток розы падает. И второй. И целый листопад!
Что мы будем строить?
Мы создадим анимацию, которая генерирует множество лепестков роз, заставляет их плавно падать сверху вниз, слегка покачиваясь на ветру. Каждый лепесток будет уникальным: с разным размером, оттенком и скоростью падения.
Шаг 1. Готовим сцену (HTML и CSS)
Сначала создадим простую HTML-страницу. Нам понадобится контейнер, в котором будут летать наши лепестки.
html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Падающие лепестки роз | Волшебная анимация</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden; /* Убираем полосы прокрутки */
font-family: 'Arial', sans-serif;
}
/* Затемненный фон, чтобы лепестки были видны идеально */
#background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(145deg, #1a1a2e 0%, #16213e 100%);
z-index: -1;
}
/* Контейнер для лепестков */
.petal-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none; /* Лепестки не мешают нажимать на кнопки сайта */
z-index: 10;
}
/* Стиль сообщения для красоты */
.message {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: rgba(255, 255, 255, 0.8);
text-align: center;
z-index: 20;
text-shadow: 0 0 20px rgba(255, 182, 193, 0.5);
pointer-events: none;
}
.message h1 {
font-size: 3rem;
margin-bottom: 0;
letter-spacing: 4px;
}
.message p {
font-size: 1.2rem;
opacity: 0.7;
}
</style>
</head>
<body>
<div id="background"></div>
<div class="message">
<h1>🌹 С женским днем, любимые женщины!</h1>
<p>Пусть этот день будет таким же прекрасным</p>
</div>
<div class="petal-container" id="petal-container"></div>
<script src="petals.js"></script>
</body>
</html>
Важный нюанс: pointer-events: none позволяет лепесткам быть просто красивым фоном. Пользователь сможет кликать по ссылкам и кнопкам сквозь них, а лепестки при этом будут продолжать падать.
Шаг 2. Рисуем лепесток (JavaScript)
А теперь самое интересное. Мы будем создавать лепестки программно. Чтобы анимация была плавной и не тормозила, используем requestAnimationFrame.
Создайте файл petals.js и начнем творить.
javascript
// Получаем контейнер
const container = document.getElementById('petal-container');
// Настройки
const PETAL_COUNT = 50; // Количество лепестков (чем больше, тем романтичнее, но тяжелее)
const COLORS = [
'#ffb7c5', // Нежно-розовый
'#ff9eb5', // Розовый
'#ff85a1', // Потемнее
'#f9a8b8', // Теплый розовый
'#fbb1c2' // Перламутровый
];
// Класс Лепесток
class Petal {
constructor(container) {
this.container = container;
this.element = document.createElement('div');
this.element.className = 'petal';
// Случайные характеристики
this.width = Math.random() * 30 + 15; // 15-45px
this.height = this.width * (Math.random() * 0.4 + 0.6); // Сохраняем форму лепестка (овал)
this.color = COLORS[Math.floor(Math.random() * COLORS.length)];
this.opacity = Math.random() * 0.7 + 0.2; // 0.2-0.9
// Позиция
this.x = Math.random() * window.innerWidth;
this.y = Math.random() * window.innerHeight * 2 - window.innerHeight; // Старт выше экрана
// Скорость и поворот
this.speedY = Math.random() * 1.5 + 0.5; // Скорость падения
this.speedX = Math.random() * 0.5 - 0.25; // Легкое покачивание влево-вправо
this.rotation = Math.random() * 360;
this.rotationSpeed = (Math.random() - 0.5) * 0.02; // Скорость вращения
// Применяем стили
this.element.style.cssText = `
position: absolute;
width: ${this.width}px;
height: ${this.height}px;
background-color: ${this.color};
opacity: ${this.opacity};
border-radius: 80% 20% 80% 20% / 60% 40% 60% 40%; /* Форма лепестка */
transform: rotate(${this.rotation}deg);
left: ${this.x}px;
top: ${this.y}px;
box-shadow: 0 0 10px rgba(255, 182, 193, 0.5);
pointer-events: none;
will-change: transform, top, left; /* Для производительности */
`;
this.container.appendChild(this.element);
}
// Обновление позиции
update() {
this.y += this.speedY;
this.x += Math.sin(Date.now() * 0.002 + this.y) * 0.3; // Плавное покачивание синусом
this.rotation += this.rotationSpeed;
// Если лепесток улетел за пределы экрана снизу - возвращаем наверх
if (this.y > window.innerHeight + 100) {
this.y = -100;
this.x = Math.random() * window.innerWidth;
this.rotation = Math.random() * 360;
}
// Мягкое появление слева/справа (бесконечный цикл)
if (this.x > window.innerWidth + 50) this.x = -50;
if (this.x < -50) this.x = window.innerWidth + 50;
// Применяем новое положение
this.element.style.transform = `rotate(${this.rotation}deg)`;
this.element.style.top = `${this.y}px`;
this.element.style.left = `${this.x}px`;
}
}
// Создаем массив лепестков
let petals = [];
function initPetals() {
for (let i = 0; i < PETAL_COUNT; i++) {
petals.push(new Petal(container));
}
}
// Функция анимации
function animate() {
petals.forEach(petal => petal.update());
requestAnimationFrame(animate);
}
// Запускаем при загрузке
window.addEventListener('load', () => {
initPetals();
animate();
});
// Подстраиваемся под изменение размера окна
window.addEventListener('resize', () => {
// Просто перезапускаем позиции для красоты
petals.forEach(petal => {
if (petal.x > window.innerWidth) petal.x = Math.random() * window.innerWidth;
if (petal.y > window.innerHeight) petal.y = Math.random() * -window.innerHeight;
});
});
Результат будет примерно таким:
Как это работает под капотом?
Секрет анимации в трех вещах:
- Форма лепестка. Мы не используем картинки. Форма создается через border-radius с хитрыми пропорциями 80% 20% 80% 20% / 60% 40% 60% 40%. Это дает тот самый «рваный» край, похожий на настоящий лепесток розы.
- Покачивание. В функции update() мы используем Math.sin(Date.now() * 0.002 + this.y). Это заставляет лепесток немного вибрировать влево-вправо в зависимости от времени, создавая эффект полета на ветру.
- Цикличность. Когда лепесток улетает вниз, мы не удаляем его, а возвращаем наверх с новым случайным положением. Так анимация может длиться вечно.
Как использовать на своем сайте?
- Скопируйте HTML-код и JS-код в соответствующие файлы.
- Хотите больше лепестков? Увеличьте PETAL_COUNT.
- Хотите изменить цветовую гамму? Добавьте свои коды цветов в массив COLORS.
- Устали от роз и хотите снег? Просто поменяйте цвета на белые/голубые, уменьшите border-radius до 50% (сделайте круги) — и получится снегопад.
Поздравляю!
Вы только что создали анимацию, которая выглядит дорого, работает на чистом коде и не требует никаких плагинов. Этот эффект можно повесить на лендинг в честь 8 Марта, на страницу с признанием в любви или просто использовать как красивую заставку.
Пробуйте, экспериментируйте и удивляйте! А если хотите больше подобных уроков по JavaScript-магии — подписывайтесь и ставьте лайк, это очень мотивирует крутить код дальше.
А вы знали? В Японии есть традиция любоваться цветением сакуры (ханами). Наша анимация — это маленькое цифровое ханами, которое всегда с тобой. 🌸