ПРОДВИНУТЫЙ КОНСТРУКТОР ФОНОВ
Создавайте линейные и радиальные анимированные градиенты
Экспорт кода
Инструкция по использованию:
1. Настройте каждый слой градиента (линейный или радиальный)
2. Используйте дополнительные настройки для точного позиционирования цветов
3. Скопируйте код или скачайте HTML-файл
4. Вставьте код в нужное место на сайте
5. Добавьте класс к вашему контейнеру (по умолчанию "animated-bg")
6. Убедитесь, что контейнер имеет размеры (например: width: 100%; height: 100vh;)
Трехслойный анимированный фон:
Каждый слой имеет настраиваемые цвета градиента
Угол наклона для каждого градиента
Скорость перехода между слоями
Полная настройка:
6 цветовых палитр (по 2 для каждого слоя)
Угол наклона от 0° до 360° для каждого градиента
Регулировка скорости анимации
Интерактивный предпросмотр:
Изменения в реальном времени
Пример контента с заголовком и кнопкой
Адаптивный дизайн для всех устройств
Экспорт кода:
Готовый HTML/CSS код для вставки
Возможность копировать код
Скачивание готового HTML-файла
Настраиваемый класс элемента
Как использовать
Настройте цвета и углы для каждого из трех слоев градиента
Отрегулируйте скорость анимации по своему вкусу
Скопируйте сгенерированный код или скачайте HTML-файл
Вставьте код на свою страницу
Добавьте класс (по умолчанию "animated-bg") к нужному элементу
Конструктор создает плавную анимацию перехода между тремя градиентными слоями, создавая эффект "перетекания" цветов. Вы можете использовать этот фон для герой-секций, заголовков или в качестве фона для всего сайта.
Просто откройте HTML-файл в браузере, и конструктор готов к работе!
Основные исправления и улучшения:
25. 03..2025
Устранена проблема с WebAssembly:
Полностью переработана система обновления фона
Удалены все зависимости от внешних библиотек
Используется чистая JavaScript реализация
Работа в реальном времени:
Все изменения мгновенно отображаются в предпросмотре
Плавные анимации при переключении настроек
Динамическое обновление цветовых превью
Улучшенная система обновления:
Единая функция updateBackground() для всех изменений
Синхронизация значений полей ввода (range и number)
Автоматическое обновление кода экспорта
Новые функции:
Поддержка конических градиентов
Улучшенные пресеты с автоматическим применением
Опция экспорта в разных форматах (HTML, CSS, React, Vue)
Эффекты размытия и яркости
Оптимизация производительности:
Устранена проблема с зависаниями интерфейса
Улучшена обработка событий
Оптимизированы анимации
Как использовать:
Настройте каждый слой градиента (цвета, тип, угол)
Добавьте эффекты (размытие, яркость)
Выберите готовый пресет для быстрого результата
Скопируйте или экспортируйте код в нужном формате
Вставьте код на свой сайт
Ваш заказ
POWER Full 14POWER Full 141000₽
POWER Full 14POWER Full 142000₽
3000₽
Оставляя заявку, вы соглашаетесь на обработку персональных данных
Назад
Модификации
Подборка кодовых модификаций для сайтов на Craftum, позволяющая решить любые задачи, выходящие за рамки стандартного конструктора Craftum.
С генераторами кода и видео-инструкциями.
Расширения для Craftum, с которым ты можешь больше и быстрее создать продающий и впечатляющий сайт для себя и своих клиентов.
С генераторами кода и видео-инструкциями.
Расширения для Craftum, с которым ты можешь больше и быстрее создать продающий и впечатляющий сайт для себя и своих клиентов.
Для сайта
Craftum
Сайт создан на Craftum