Анимации

Движение делает сайт живым: заголовок проступает при загрузке, карточки выезжают по очереди при прокрутке, кнопка откликается на курсор. В Velvio есть библиотека из 41 готового эффекта — они подбираются под тип элемента и ставятся одним кликом, без ИИ и без кредитов.

Добавить анимацию

1. В редакторе выберите элемент — кнопка «Выбрать на странице» в строке чата или Alt+S. На планшете дважды коснитесь элемента.
2. На панели над элементом нажмите «Анимация». Слева, на месте чата, откроется окно с живыми примерами эффектов, подходящих именно этому элементу. Примеры повторяются по кругу — можно спокойно рассмотреть.
3. Нажмите на пример — эффект сразу появится на элементе. Наведите мышь на элемент, чтобы увидеть его ещё раз. Не понравился — выберите другой.
4. Можно выбрать другой элемент на странице — окно останется и покажет эффекты для него.
5. Эффект попадёт в «Правки на странице» над чатом. Нажмите «Применить» — сайт соберётся с анимацией за несколько секунд.

Перебирать эффекты можно сколько угодно: в правки попадёт только последний выбранный. Отменить выбор — Ctrl+Z или ↶. Закрыть окно — Esc или ✕ (невыполненные правки останутся), второй Esc снимет выбор с элемента.

На телефоне окно выезжает снизу поверх сайта.

Какие бывают эффекты

Эффекты разделены на три вида — в панели они так и сгруппированы.

Вид	Когда работает	Примеры
При появлении	один раз, когда элемент показался на экране	проявление, выезд снизу или сбоку, из размытия, шторка, пружина
Всё время	постоянно, пока элемент на экране	парение, пульс, блик по кнопке, медленный наезд камеры на фото, переливы по буквам
При наведении	когда посетитель наводит курсор	приподнять карточку, свечение кнопки, 3D-наклон, подчёркивание ссылки

Набор зависит от элемента:

• заголовок и текст — буквы из разрядки, шторка, переворот, печатная машинка, сборка из букв, расшифровка, волна по буквам, переливы;
• картинка — шторка, наезд камеры, парение, лупа, RGB-глитч, приближение и яркость при наведении;
• кнопка — пружина, приподнять, свечение, сдвиг, магнит, блик, блик по рамке, сияние, пульс, кольцо света, парение;
• карточка и блок — подъём из размытия, с поворотом, содержимое по очереди, луч по рамке, радужная рамка, парение, приподнять и 3D-наклон при наведении, веер для блока с картинками;
• иконка — пружина, парение, пульс, покачивание, вращение, магнит.

Появления из первой строки таблицы (проявление, выезды, приближение, из размытия, подъём из размытия) есть у любого элемента.

Карточки из списка

Если выбрать одну карточку из повторяющихся (услуги, товары, отзывы), эффект получат все карточки этого списка — и появятся они по очереди, «лесенкой». Номер карточки виден на панели, например «2/6».

Убрать анимацию

Выберите элемент, откройте «Анимация» и нажмите «Без анимации», затем «Применить».

Сложнее, чем готовый эффект

Счётчик цифр, параллакс, движение по сценарию — это уже не готовый эффект. Выберите элемент, нажмите «Спросить ИИ» и опишите, что нужно, например «числа в блоке “3 200+ пациентов” отсчитываются при появлении». Готовые формулировки — в разделе Анимации — готовые запросы.

Эффекты обновляются сами

Библиотека эффектов подключена к сайту с сервера Velvio. Когда мы улучшаем эффект или добавляем новые, опубликованные сайты получают это сами — пересобирать ничего не нужно.

Если эффект не поставился

Иногда элемент в коде собран из общего компонента, и прямо на него эффект не поставить. Тогда редактор предложит сделать то же самое через ИИ — бесплатно.

Советы

• Анимируйте два-три главных элемента: первый экран, кнопку заявки, ключевой блок. Когда движется всё, посетитель не понимает, куда смотреть.
• Постоянные эффекты — на одну вещь на экране: блик на главной кнопке или парение иконки, а не всё сразу.
• «Печатная машинка» и «Переливы» — для короткой строки или одного-двух слов.
• У посетителей, которые включили в системе «уменьшить движение», анимации отключаются автоматически: всё просто видно сразу.
• Библиотека эффектов подключается к сайту с сервера Velvio, поэтому скачанный архивом сайт тоже её использует — нужен интернет.