Создать сайт бесплатно!
Главная
AI Code
Как украсить сайт анимацией с помощью AI Code
Telegram
Будьте в курсе всех обновлений: подпишитесь на наш официальный Telegram-канал uCoz и задавайте вопросы в чате сообщества!

Как украсить сайт анимацией с помощью AI Code

Как украсить сайт анимацией с помощью AI Code
Материал добавлен: 30 Сентября 2025
Материал обновлен: 30 Сентября 2025

AI Code может c легкостью помочь добавить на сайт праздничную атмосферу с помощью простых анимаций: падающее конфетти, снежинки или другие элементы. Достаточно описать эффект обычными словами — ассистент сгенерирует готовый HTML, CSS и JS для вставки в шаблон.

Как это работает

  1. Зайдите в раздел «Дизайн» → «Редактор шаблонов».
  2. Откройте нужный шаблон (например, «Верхняя часть сайта»).
  3. Сформулируйте запрос для AI Code простыми словами.
  4. Получите готовый код и вставьте его в шаблон.

Примеры промптов

Шаблон: Верхняя часть сайта (Глобальные блоки)

Анимация AI Code 
Сделай на сайте праздничную атмосферу: анимация падающих разноцветных конфетти сверху вниз, 
фон остаётся без изменений. Нужен готовый HTML, CSS и JS код для вставки на страницу.
Анимация AI Code 
Сделай простой эффект снега для сайта: звёздочки или снежинки медленно падают сверху вниз, 
иногда чуть колышутся в стороны, а когда доходят до низа экрана — снова появляются сверху.

Где разместить код в шаблоне?

  1. HTML контейнера добавьте в самом начале шаблона, чтобы на странице сразу появлялся блок для эффекта.
  2. CSS добавьте в Таблицу стилей (CSS) или вставьте <style> после HTML-блока.
  3. JS поместите в самом конце шаблона "Верхняя часть сайта".

Готовые коды (ориентир)

🎉 Конфетти


<style>
#confetti-container {
 position: fixed;
 top: 0; left: 0;
 width: 100%; height: 100%;
 pointer-events: none;
 z-index: 9999;
 overflow: hidden;
}
.confetti {
 position: absolute;
 width: 10px; height: 10px;
 background-color: red;
 opacity: 0.8;
 animation: fall linear infinite;
}
@keyframes fall {
 to { transform: translateY(100vh) rotate(360deg); }
}
</style>

<div id="confetti-container"></div>

<script>
(function() {
 const container = document.getElementById('confetti-container');
 const colors = ['#ff4757','#1e90ff','#2ed573','#ffa502','#eccc68'];
 const confettiCount = 50;

 for (let i = 0; i < confettiCount; i++) {
 const c = document.createElement('div');
 c.className = 'confetti';
 c.style.left = Math.random() * 100 + 'vw';
 c.style.backgroundColor = colors[Math.floor(Math.random()*colors.length)];
 c.style.animationDuration = (Math.random()*3 + 3) + 's';
 c.style.width = c.style.height = (Math.random()*6+6) + 'px';
 container.appendChild(c);
 }
})();
</script>

❄️ Снежинки


<style>
 #snowflake-container {
 pointer-events: none;
 position: fixed;
 top: 0; left: 0; width: 100%; height: 100%;
 overflow: hidden;
 z-index: 9999;
 }
 .snowflake {
 position: absolute;
 top: -10px;
 color: #fff;
 user-select: none;
 font-size: 14px;
 opacity: 0.8;
 will-change: transform;
 animation-name: fall, sway;
 animation-timing-function: linear, ease-in-out;
 animation-iteration-count: infinite, infinite;
 }
 @keyframes fall {
 to { transform: translateY(100vh); }
 }
 @keyframes sway {
 0%, 100% { transform: translateX(0); }
 50% { transform: translateX(15px); }
 }
</style>

<div id="snowflake-container"></div>

<script>
(function() {
 const container = document.getElementById('snowflake-container');
 const snowflakeCount = 30;

 function random(min, max) {
 return Math.random() * (max - min) + min;
 }

 for (let i = 0; i < snowflakeCount; i++) {
 const snowflake = document.createElement('div');
 snowflake.className = 'snowflake';
 snowflake.textContent = '❄️';
 snowflake.style.left = random(0, 100) + 'vw';
 snowflake.style.fontSize = random(10, 20) + 'px';
 snowflake.style.animationDuration = random(10, 20) + 's, ' + random(3, 6) + 's';
 container.appendChild(snowflake);
 }
})();
</script>

Проверка работы

Обновите сайт: сверху начнут падать разноцветные конфетти или снежинки. Элементы не мешают кликам и автоматически повторяются.

Как доработать результат с помощью ассистента

Если эффект нужно изменить, просто уточните это у AI Code — он поправит код.

Примеры уточнений

  • Сделай частицы конфетти размером 20px и пусть они падают за 7 секунд, чтобы выглядело медленнее.
  • Замени символ снежинки ❄️ на эмодзи сердечка ❤️, чтобы падали сердечки.
  • Увеличь количество элементов до 100 штук, чтобы эффект был плотнее.
  • Поставь прозрачность элементов 0.5, чтобы они не перекрывали текст на странице.
  • Сделай так, чтобы анимация отключалась на экранах меньше 768px (мобильные устройства).
  • Добавь лёгкое вращение для каждого элемента, чтобы они не просто падали вниз.
Как украсить сайт анимацией с помощью AI Code