Привіт, усім! 🎄 У цій статті я покажу, як створити анімовану зворотну відлік до Нового року за допомогою GSAP (GreenSock Animation Platform). Цей проект включатиме:
- Анімації феєрверків,
- Анімації конфеті,
- Числа відліку,
- І красивий дизайн фону.
Поїхали! 🚀
🛠️ Інструменти та технології
Для цього проекту ми використаємо наступні інструменти та технології:
- HTML: Для структурування проекту.
- CSS: Для стилізації та покращення анімацій.
- JavaScript: Для керування анімаціями за допомогою GSAP.
4.
GSAP: Для створення плавних, професійних анімацій.
1️⃣ Крок: Налаштування проекту
Почнемо з створення простої структури HTML і імпорту бібліотеки GSAP та шрифта (Agbalumo) для стилізації.
\
\
\
\
\
\New Year Countdown\
\
Кожне число буде відображатися з феєрверками, а на "0" з'являться конфеті, супроводжуючи написом "Щасливого Нового року!"
function startCountdown() {
let count = 5;
const countdown = document.getElementById('countdown');
const timeline = gsap.timeline({
onComplete: () => {
countdown.textContent = "Щасливого Нового року!";
createConfetti(); // Запуск конфеті
createFireworks(); // Запуск феєрверків
},
});
for (let i = count; i > 0; i--) {
timeline.add(() => {
countdown.textContent = i;
createFireworks(); // Феєрверки на кожному числі
}, (count - i) * 1);
}
}
startCountdown();
```
🎨 Останні штрихи
Після завершення проекту ви отримаєте:
- Динамічний зворотний відлік, що запускає феєрверки для кожного числа.
- Яскраві анімації конфеті на "0".
- Стильний дизайн фону та тексту, який підсилює святкову атмосферу.
🎉 Спробуйте самі!
Не соромтеся експериментувати з:
- Додаванням індивідуальних кольорів для конфеті.
- Налаштуванням часу та швидкості анімацій.
- Зміною фону чи шрифта для більш персоналізованого досвіду.
Перегляньте приклад на CodePen для повної реалізації.
Поділіться своїми думками в коментарях або покажіть свої власні дизайни. Щасливого Нового року! 🎄🎆
Перекладено з: 🎉 Create a New Year Countdown with GSAP!