header-logo
Узнайте как использовать Wix для создания своего сайта и бизнеса.
Создавайте и управляйте своим сайтом, используя интуитивно понятные функции Wix.
Управляйте подписками, планами и счетами.
Управляйте своим бизнесом и общайтесь с пользователями.
Узнайте, как приобрести, подключить или перенести домен на свой сайт.
Получите инструменты для развития вашего бизнеса и присутствия в интернете.
Повышайте свою видимость с помощью инструментов SEO и маркетинга.
Получайте расширенные функции, которые помогут вам работать более эффективно.
Находите решения, узнавайте об известных неполадках или свяжитесь с нами.
placeholder-preview-image
Совершенствуйте навыки с помощью наших курсов и учебных статей.
Получайте рекомендации по веб-дизайну, маркетингу и многому другому.
Узнайте, как увеличить органический трафик из поисковых систем.
Создайте собственный сайт на нашей полнофункциональной платформе.
Найдите подходящего специалиста, который поможет вам достичь целей.
placeholder-preview-image
В этой статье
  • Анимация появления
  • Взаимодействия при наведении и клике
  • Анимация при прокрутке
  • Зацикленная анимация
  • Эффекты WebGL для медиафонов
  • Часто задаваемые вопросы

Редактор Studio: об анимации

4 мин.
Использование наших анимаций в ваших дизайнах может вывести их на новый уровень. Редактор Studio предлагает 5 различных типов анимации в зависимости от того, когда вы хотите, чтобы они появились.
Настройте появление анимации, когда посетители наводят курсор, кликают или прокручивают страницу мимо элемента. Вы также можете добавить анимацию появления при первой загрузке элемента или зацикленный повтор — и все это без единой строчки кода.
Примечание:
Размер анимации рассчитывается в соответствии с параметрами браузера при первой загрузке страницы. Если изменить размер окна браузера (потянув за его края), анимация может отображаться некорректно. Мы рекомендуем обновить страницу для оптимального отображения.

Анимация появления

Добавление анимации появления для элемента — отличный способ привлечь к нему внимание посетителей. Анимация воспроизводится, когда элемент впервые попадает в поле зрения, поэтому она мгновенно бросается в глаза. Вы можете выбрать один из множества типов и настроить его в соответствии с потребностями клиента.
Пример анимации появления для всей страницы, раскрывающей ее по мере загрузки

Взаимодействия при наведении и клике

Добавьте классные эффекты, которые появляются, когда посетители наводят курсор или кликают на элемент. Вы можете заставить элементы трансформироваться, перемещаться или раскрывать новый контент при наведении или клике.
Выбирайте из множества готовых эффектов или создайте собственный эффект по своим параметрам. Управляйте временем, порядком и плавностью, чтобы объединить все элементы, а затем посмотрите результат прямо в редакторе.
Вы также можете создавать взаимодействия между элементами, чтобы при наведении или клике на один элемент запускалась анимация другого.
В примере ниже наведение курсора на абзац служит триггером для движения кнопки и изображения.
GIF-файл, демонстрирующий работу взаимодействий на опубликованном сайте.

Анимация при прокрутке

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

Зацикленная анимация

Создайте ощущение движения в вашем дизайне с помощью анимаций с зацикленным повтором. Вы можете добавить зацикленный повтор к любому элементу, который должны заметить посетители: некоторые из них более тонкие, а другие по-настоящему привлекают внимание.
Пример элемента «Текстовая маска» с зацикленной анимацией на опубликованном сайте

Эффекты WebGL для медиафонов

Преобразите проекты клиентов с помощью наших эффектов WebGL, которые превратят медиафоны в нечто впечатляющее. Эти эффекты привлекают посетителей сайта и обеспечивают оптимальную производительность. Выбирайте из множества впечатляющих пресетов, настраивайте их характеристики и выбирайте способ активации: автоматически при прокрутке или при движении курсора посетителя.
GIF-файл, демонстрирующий опубликованный сайт с WebGL-анимацией на фоне нескольких секций.

Часто задаваемые вопросы

Выберите вопрос, чтобы узнать больше об эффектах анимации.

Helpmate

Привет,

Нужны дополнительные рекомендации?
Краткое содержание этой статьи
Unlock personalized helpLog in to get the most out of Helpmate.