Перейти к основному содержимому

Создание анимированных баннеров и многоязычность на сайте

· 10 мин. чтения
OWIX AI Division
OWIX AI Division
Команда экспертов по AI

11 февраля 2026

Оглавление​

  1. Введение
  2. Типы баннеров для сайта
  3. GSAP анимации
  4. Горизонтальные баннеры
  5. Вертикальные баннеры
  6. Баннеры с изображениями
  7. Профессиональные баннеры
  8. Многоязычность и автоматический перевод
  9. Практические примеры
  10. Заключение

1. Введение​

Привлекательные баннеры с анимациями и многоязычностью повышают конверсию и улучшают пользовательский опыт. В этой статье мы рассмотрим:

  • Создание различных типов баннеров
  • GSAP анимации для профессионального вида
  • Реализацию многоязычности с автоматическим переводом
  • Практические примеры кода

2. Типы баннеров для сайта​

2.1 По размеру​

Горизонтальные:

  • Стандартные (728x90)
  • Широкие (970x250)
  • Компактные (400x200)

Вертикальные:

  • Боковые (160x600)
  • Квадратные (250x250)
  • Мини (200x200)

2.2 По назначению​

ТипЦельПример
Hero bannerГлавный призыв"Начать проект"
CTA bannerПризыв к действию"Скачать"
Info bannerИнформация"Новая функция"
Promo bannerАкция"Скидка 50%"
Social proofОтзывы"Рейтинг 4.9"

3. GSAP анимации​

3.1 Почему GSAP?​

Преимущества:

  • Плавные анимации (hardware acceleration)
  • Timeline-контроль
  • Много готовых эффектов
  • Production-ready

Установка:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>

3.2 Базовые анимации​

Появление:

gsap.from('.banner', {
    y: 30,
    opacity: 0,
    duration: 0.6,
    delay: 0.2,
    ease: 'power2.out'
});

Hover эффект:

banner.addEventListener('mouseenter', () => {
    gsap.to(banner, { scale: 1.05, duration: 0.3 });
});
banner.addEventListener('mouseleave', () => {
    gsap.to(banner, { scale: 1, duration: 0.3 });
});

Ротация текста:

const phrases = ['текст 1', 'текст 2', 'текст 3'];
let index = 0;

function changeText() {
    gsap.to(element, {
        opacity: 0, y: -20, duration: 0.3,
        onComplete: () => {
            index = (index + 1) % phrases.length;
            element.textContent = phrases[index];
            gsap.fromTo(element, { opacity: 0, y: 20 }, { opacity: 1, y: 0, duration: 0.3 });
        }
    });
}
setInterval(changeText, 3000);

4. Горизонтальные баннеры​

4.1 Gradient Arrow​

<a href="#" class="banner-h1">
    <div class="banner-h1-icon">
        <svg width="24" height="24" fill="none" stroke="white" stroke-width="2">
            <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/>
        </svg>
    </div>
    <div class="banner-h1-content">
        <h3>Ускорение разработки с AI</h3>
        <p>Сократите время разработки на 40%</p>
    </div>
    <div class="banner-h1-arrow">→</div>
</a>

<style>
.banner-h1 {
    display: flex; align-items: center; gap: 20px;
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: 16px; padding: 20px 28px;
    transition: all 0.3s ease; cursor: pointer;
}
.banner-h1:hover {
    transform: translateX(8px);
    box-shadow: 0 8px 30px rgba(99, 102, 241, 0.3);
}
.banner-h1-icon {
    width: 48px; height: 48px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
}
.banner-h1-content h3 { color: #fff; font-size: 16px; font-weight: 600; }
.banner-h1-content p { color: #a1a1aa; font-size: 13px; }
</style>

4.2 Animated Shimmer​

<a href="#" class="banner-shimmer">
    <div class="banner-content">
        <h3>Новая функция <span class="new">NEW</span></h3>
        <p>Откройте для себя возможности AI</p>
    </div>
</a>

<style>
.banner-shimmer {
    display: flex; align-items: center; gap: 20px;
    background: linear-gradient(135deg, #1e1e3f, #2d2d5a);
    border-radius: 16px; padding: 20px 28px;
    position: relative; overflow: hidden;
}
.banner-shimmer::after {
    content: '';
    position: absolute; top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
    animation: shimmer 2s infinite;
}
@keyframes shimmer {
    100% { left: 100%; }
}
.banner-shimmer:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(99, 102, 241, 0.3);
}
</style>

4.3 Другие варианты​

СтильОписание
With ImageКартинка + тег "Популярное"
Dashed BorderПунктирная граница
Left BorderБоковой бордер, минималистичный
NotificationAlert-стиль с иконкой

5. Вертикальные баннеры​

5.1 Card Style для сайдбара​

<a href="#" class="banner-v1">
    <div class="banner-v1-icon">⚡</div>
    <h3>AI решения для бизнеса</h3>
    <p>Автоматизация и оптимизация</p>
    <button>Подробнее →</button>
</a>

<style>
.banner-v1 {
    background: linear-gradient(180deg, #1a1a2e, #16213e);
    border: 1px solid rgba(99, 102, 241, 0.25);
    border-radius: 20px; padding: 28px 24px;
    width: 280px; text-align: center;
    cursor: pointer; transition: all 0.3s ease;
}
.banner-v1:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(99, 102, 241, 0.3);
}
.banner-v1-icon {
    width: 56px; height: 56px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border-radius: 16px; margin: 0 auto 16px;
}
.banner-v1 h3 { color: #fff; font-size: 18px; font-weight: 700; }
.banner-v1 p { color: #a1a1aa; font-size: 13px; }
</style>

5.2 Dark with Glow​

<a href="#" class="banner-v2">
    <span class="badge">Рекомендуем</span>
    <h3>ChatGPT для разработчиков</h3>
    <p>Практические советы по использованию</p>
    <span class="link">Читать →</span>
</a>

<style>
.banner-v2 {
    background: linear-gradient(180deg, #0f0f1a, #1a1a2e);
    border: 1px solid rgba(192, 132, 252, 0.3);
    border-radius: 20px; padding: 24px; width: 280px;
    position: relative; overflow: hidden; cursor: pointer;
}
.banner-v2::before {
    content: ''; position: absolute; top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: radial-gradient(circle, rgba(192, 132, 252, 0.1) 0%, transparent 50%);
    opacity: 0; transition: opacity 0.3s;
}
.banner-v2:hover::before { opacity: 1; }
.banner-v2:hover { border-color: #c084fc; transform: scale(1.02); }
</style>

6. Баннеры с изображениями​

6.1 Split Layout​

<a href="#" class="banner-split">
    <div class="banner-content">
        <span class="badge">🔥 Тренд 2026</span>
        <h3>AI-революция в разработке</h3>
        <p>Узнайте, как ведущие компании используют AI</p>
        <button>Узнать больше →</button>
    </div>
    <div class="banner-image"></div>
</a>

<style>
.banner-split {
    display: flex; min-height: 280px;
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    border-radius: 24px; overflow: hidden;
}
.banner-content { flex: 1; padding: 40px; }
.banner-image {
    width: 45%;
    background: url('image.jpg') center/cover;
}
.banner-split:hover .banner-content h3 { color: #6366f1; }
</style>

6.2 Full Overlay​

<a href="#" class="banner-overlay">
    <div class="banner-bg"></div>
    <div class="banner-overlay-layer"></div>
    <div class="banner-content">
        <h3>Создавайте умнее</h3>
        <p>Профессиональный набор AI-инструментов</p>
        <button>Начать бесплатно</button>
    </div>
</a>

<style>
.banner-overlay {
    position: relative; border-radius: 24px;
    padding: 60px; min-height: 320px;
    display: flex; align-items: center;
}
.banner-bg {
    position: absolute; inset: 0;
    background: url('bg.jpg') center/cover;
}
.banner-overlay-layer {
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.92), rgba(139, 92, 246, 0.92));
}
.banner-content { position: relative; z-index: 2; max-width: 500px; }
.banner-content h3 { color: #fff; font-size: 32px; }
.banner-content p { color: rgba(255,255,255,0.9); }
</style>

6.3 Before/After​

<div class="banner-comparison">
    <div class="before">
        <img src="before.jpg" alt="До">
        <span>Традиционная разработка</span>
    </div>
    <div class="arrow">→</div>
    <div class="after">
        <img src="after.jpg" alt="После">
        <span>С AI-ассистентом</span>
    </div>
</div>

7. Профессиональные баннеры​

7.1 Timer & Discount​

<a href="#" class="banner-timer">
    <div class="banner-timer-content">
        <span class="badge">⚡ Скидка 50%</span>
        <h3>Успейте оформить подписку</h3>
        <div class="timer">
            <span class="time-item"><b id="days">02</b>Дни</span>
            <span class="time-item"><b id="hours">14</b>Часы</span>
            <span class="time-item"><b id="minutes">35</b>Мин</span>
            <span class="time-item"><b id="seconds">42</b>Сек</span>
        </div>
    </div>
    <div class="banner-timer-price">
        <span class="old">$299</span>
        <span class="new">$149</span>
    </div>
</a>

<style>
.banner-timer {
    display: flex; align-items: center; gap: 30px;
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    border-radius: 24px; padding: 35px;
}
.timer { display: flex; gap: 12px; margin-top: 20px; }
.time-item {
    background: rgba(255,255,255,0.1);
    border-radius: 10px; padding: 12px 16px;
    text-align: center;
}
.time-item b { display: block; font-size: 24px; color: #fff; }
</style>

7.2 Testimonial Social Proof​

<div class="banner-testimonial">
    <div class="avatar">АК</div>
    <div class="content">
        <div class="stars">★★★★★</div>
        <p>"OWIX AI полностью изменил наш подход к разработке..."</p>
        <div class="author">
            <strong>Алексей Козлов</strong>
            <span>Tech Lead в DataTech</span>
        </div>
    </div>
    <span class="badge">Кейс клиента</span>
</div>

8. Многоязычность и автоматический перевод​

8.1 Подходы к реализации​

СпособПлюсыМинусы
Локальный JSONБыстро, бесплатно, офлайнНужно вручную добавлять
LibreTranslate APIАвтоматическийRate limit
Google/DeepL APIВысокое качествоПлатный

8.2 Локальные переводы​

const translations = {
    ru: {
        banner1: { title: 'Ускорение разработки', desc: 'Сократите время на 40%' },
        banner2: { title: 'Бесплатная консультация', desc: 'Обсудите проект' },
    },
    en: {
        banner1: { title: 'Accelerate Development', desc: 'Reduce time by 40%' },
        banner2: { title: 'Free Consultation', desc: 'Discuss your project' },
    },
    es: {
        banner1: { title: 'Acelera el Desarrollo', desc: 'Reduce el tiempo 40%' },
        banner2: { title: 'Consulta Gratuita', desc: 'Discute tu proyecto' },
    },
    de: {
        banner1: { title: 'Entwicklung beschleunigen', desc: 'Zeit um 40% reduzieren' },
        banner2: { title: 'Kostenlose Beratung', desc: 'Projekt besprechen' },
    },
    zh: {
        banner1: { title: '使用AI加速开发', desc: '将开发时间缩短40%' },
        banner2: { title: '免费咨询', desc: '与专家讨论您的项目' },
    },
    ja: {
        banner1: { title: 'AIで開発を加速', desc: '開発時間を40%短縮' },
        banner2: { title: '無料コンサル', desc: '専門家とプロジェクトを検討' },
    }
};

function applyTranslation(lang) {
    document.querySelectorAll('.banner').forEach(banner => {
        const key = banner.dataset.key;
        if (translations[lang] && translations[lang][key]) {
            banner.querySelector('h3').textContent = translations[lang][key].title;
            banner.querySelector('p').textContent = translations[lang][key].desc;
        }
    });
}

8.3 Модальное окно выбора языка​

<div class="lang-modal" id="langModal">
    <div class="lang-modal-content">
        <h2>🌐 Выберите язык</h2>
        <div class="lang-grid">
            <button class="lang-option" data-lang="ru">🇷🇺 Русский</button>
            <button class="lang-option" data-lang="en">🇺🇸 English</button>
            <button class="lang-option" data-lang="es">🇪🇸 Español</button>
            <button class="lang-option" data-lang="de">🇩🇪 Deutsch</button>
            <button class="lang-option" data-lang="zh">🇨🇳 中文</button>
            <button class="lang-option" data-lang="ja">🇯🇵 日本語</button>
        </div>
    </div>
</div>

8.4 Поддерживаемые языки (15)​

КодЯзыкКодЯзык
ruРусскийitИтальянский
enАнглийскийptПортугальский
esИспанскийzhКитайский
frФранцузскийjaЯпонский
deНемецкийkoКорейский
ukУкраинскийarАрабский
plПольскийhiХинди
trТурецкий

9. Практические примеры​

9.1 Полный пример баннера с GSAP​

<!DOCTYPE html>
<html lang="ru">
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
    <style>
        .hero-banner {
            background: linear-gradient(135deg, #0f0f1a, #1a1a2e);
            padding: 60px 40px; text-align: center;
            position: relative; overflow: hidden;
        }
        .badge {
            background: rgba(99, 102, 241, 0.15);
            border: 1px solid rgba(99, 102, 241, 0.3);
            color: #818cf8; padding: 8px 20px;
            border-radius: 50px; font-size: 14px;
        }
        .hero-title {
            font-size: clamp(36px, 5vw, 64px);
            color: #fff; font-weight: 800; margin: 24px 0;
        }
        .rotating-text {
            display: inline-block;
            color: #818cf8; font-weight: 700;
        }
        .rotating-text::after {
            content: '|'; animation: blink 0.7s step-end infinite;
        }
        @keyframes blink { 50% { opacity: 0; } }
        .btn {
            background: linear-gradient(135deg, #6366f1, #8b5cf6);
            color: #fff; padding: 16px 32px;
            border-radius: 12px; font-weight: 600;
            transition: all 0.3s;
        }
        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 30px rgba(99, 102, 241, 0.5);
        }
        .floating-shapes {
            position: absolute; inset: 0; pointer-events: none;
        }
        .shape {
            position: absolute; border-radius: 50%;
            filter: blur(60px); opacity: 0.3;
            animation: float 6s ease-in-out infinite;
        }
        @keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-20px); }
        }
    </style>
</head>
<body>
    <section class="hero-banner">
        <div class="floating-shapes">
            <div class="shape" style="width:300px;height:300px;background:#6366f1;top:10%;left:5%;"></div>
            <div class="shape" style="width:200px;height:200px;background:#8b5cf6;top:60%;right:10%;"></div>
        </div>
        <div class="badge">🚀 Искусственный Интеллект нового поколения</div>
        <h1 class="hero-title">
            OWIX AI — мы
            <span class="rotating-text-container">
                <span class="rotating-text" id="rotatingText"></span>
            </span>
            для вашего бизнеса
        </h1>
        <button class="btn">Начать проект →</button>
    </section>

    <script>
        const phrases = [
            'создаём AI-решения',
            'автоматизируем процессы',
            'разрабатываем чат-ботов',
            'внедряем ML',
            'оптимизируем бизнес'
        ];
        const element = document.getElementById('rotatingText');
        let i = 0;

        // GSAP entrance animation
        gsap.from('.badge', { y: -30, opacity: 0, duration: 0.8 });
        gsap.from('.hero-title', { y: 30, opacity: 0, duration: 0.8, delay: 0.2 });
        gsap.from('.btn', { y: 20, opacity: 0, duration: 0.8, delay: 0.4 });
        gsap.from('.shape', { scale: 0, opacity: 0, duration: 1, stagger: 0.2 });

        // Typing effect
        function typeWriter() {
            const p = phrases[i];
            if (element.textContent.length < p.length) {
                element.textContent = p.substring(0, element.textContent.length + 1);
                setTimeout(typeWriter, 80);
            } else {
                setTimeout(() => {
                    i = (i + 1) % phrases.length;
                    typeWriter();
                }, 2000);
            }
        }
        typeWriter();
    </script>
</body>
</html>

10. Заключение​

Создание привлекательных баннеров с анимациями и многоязычностью — это важная часть современного веб-дизайна. Ключевые моменты:

  • GSAP — лучший выбор для профессиональных анимаций
  • Локальные переводы — быстро и бесплатно для 15+ языков
  • Модальное окно — удобный выбор языка
  • Адаптивность — работает на всех устройствах

OWIX AI Division готов помочь вам создать профессиональные баннеры для вашего сайта.

Полезные ссылки​

Автор: OWIX AI Division Дата: 11 февраля 2026