header-logo
Начало работыУзнайте как использовать Wix для создания своего сайта и бизнеса.
Создание сайтаСоздавайте и управляйте своим сайтом, используя интуитивно понятные функции Wix.
Аккаунт и оплатаУправляйте подписками, планами и счетами.
Использование мобильных приложений Wix Управляйте своим бизнесом и общайтесь с пользователями.
ДоменыУзнайте, как приобрести, подключить или перенести домен на свой сайт.
Управление бизнесомПолучите инструменты для развития вашего бизнеса и присутствия в интернете.
Продвижение сайтаПовышайте свою видимость с помощью инструментов SEO и маркетинга.
Studio, Специалисты и Корпоративные решенияПолучайте расширенные функции, которые помогут вам работать более эффективно.
Нужна помощь?Находите решения, узнавайте об известных неполадках или свяжитесь с нами.
placeholder-preview-image
Wix LearnСовершенствуйте навыки с помощью наших курсов и учебных статей.
Wix БлогПолучайте рекомендации по веб-дизайну, маркетингу и многому другому.
Центр обучения SEOУзнайте, как увеличить органический трафик из поисковых систем.
Website developmentСоздайте собственный сайт на нашей полнофункциональной платформе.
Наймите профессионалаНайдите подходящего специалиста, который поможет вам достичь целей.
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.