Анімація елементів під час прокручування, наведення чи натискання.

Вивчення DXPR BuilderСтворення сторінокСтилізація елементівПосібники з дизайну

Ви можете змусити рухатися розділ, рядок або будь-який елемент вмісту. Заставте заголовок плавно з’явитися знизу під час прокручування, кнопку трохи пізніше, а піктограму пульсувати під час наведення. Кожен з них має панель Animation у своїх налаштуваннях. У прикладі заголовок плавно з’являється, а за ним із короткою затримкою з’являється кнопка реєстрації.

У відео кнопка та заголовок плавно з’являються, коли розділ потрапляє в поле зору.

Плавна поява заголовка та кнопки

  1. Натисніть Add Elements у порожній області вмісту й виберіть Section на вкладці Layout.
  2. Наведіть курсор на розділ і відкрийте More > Settings.
  3. У розділі HTML classes виберіть Align text center і натисніть Save.
  4. Натисніть + на розділі й виберіть Button на вкладці Content. Відкриються його налаштування.
  5. Введіть Register now у Title і /register у Link.
  6. Відкрийте панель Animation і встановіть Animation start у значення On appear.
  7. Установіть Animation in у значення fadeInUp.
  8. У розділі Hidden позначте Before in-animation.
  9. Установіть In-delay у значення 600 і натисніть Save.
  10. Знову натисніть + на розділі й виберіть Text на вкладці Content. Він опиниться над кнопкою.
  11. Введіть заголовок, наприклад Open day 2026, і встановіть для нього Heading 2 на панелі інструментів редактора.
  12. Відкрийте панель Animation. Виберіть On appear, fadeInUp і Before in-animation, як для кнопки.
  13. Установіть Duration у значення 800 і натисніть Save.
  14. Натисніть Save на панелі інструментів.
  15. Відкрийте меню перегляду (піктограма ока на панелі інструментів) і виберіть Preview.

Інші ефекти, які варто спробувати

  • Поява під час прокручування: On appear, fadeInUp, Before in-animation і Duration зі значенням 800.
  • Картки з затримкою: той самий ефект на трьох картках, зі значеннями In-delay 0, 200 і 400.
  • Пульсація уваги: On appear, pulse, увімкнений Infinite і Duration зі значенням 1 500.
  • Пульсація під час наведення: On hover, pulse і Parent number зі значенням 0, щоб реагував лише сам елемент.
  • Поява у вкладці: On trigger і fadeIn для елементів усередині вкладки. Вони відтворюються щоразу, коли вкладка відкривається.

Що ви бачите

Коли ви зберігаєте текст, редактор відтворює обидва ефекти: заголовок плавно з’являється знизу протягом 800 мілісекунд, а кнопка йде слідом через 600 мілісекунд. Відвідувачі бачать те саме, коли розділ потрапляє в поле зору під час прокручування, один раз за завантаження сторінки. Обидва лишаються невидимими до початку свого ефекту, бо позначено Before in-animation.

Налаштування

Налаштування Що робить Типово
Animation start Коли відтворюється ефект: On appear (потрапляння в поле зору під час прокручування), On hover, On click або On trigger (коли відкривається слайд каруселі, вкладка або перемикач, що містить елемент) No animation
Animation in Ефект появи: згасання, ковзання, масштабування, перевертання й ефекти привернення уваги, як-от bounce, pulse і shake No animation
Animation out Ефект зникнення з того самого списку. Показується лише для On hover і On trigger. No animation
Hidden Before in-animation тримає елемент невидимим до відтворення його ефекту. After in-animation приховує його після завершення ефекту. Жодне
Infinite Повторює ефект без кінця Вимкнено
Appear boundary Для On appear: наскільки нижче екрана починається ефект, у відсотках висоти екрана. 0 запускає його, коли елемент потрапляє в поле зору під час прокручування; 100 запускає його на одну висоту екрана раніше. 100
Duration Тривалість ефекту, від 0 до 3 000 мілісекунд 1000
In-delay Затримка перед відтворенням появи, до 10 000 мілісекунд 0
Out-delay Затримка перед відтворенням зникнення, до 10 000 мілісекунд 0
Parent number Для On hover і On click: на який елемент відвідувач наводить курсор або натискає. 0 це сам елемент, 1 його батьківський елемент, 2 батьківський елемент батьківського. 1

Колонки не мають панелі Animation. Як і окремі вкладки, перемикачі та слайди всередині елементів макета. Натомість анімуйте елемент усередині них.

Якщо ви не бачите анімації

  • Елемент ніколи не з’являється. Before in-animation приховує його до відтворення його ефекту, але Animation in має значення No animation. Виберіть ефект у Animation in.
  • Ефект відтворився один раз і зупинився. On appear відтворюється один раз за завантаження сторінки. Перезавантажте сторінку, щоб побачити його знову, або ввімкніть Infinite для ефекту, що повторюється.
  • Ефект починається, перш ніж відвідувач доходить до елемента. Appear boundary зависокий: за значення 100 ефект починається на одну висоту екрана раніше, ніж елемент потрапляє в поле зору під час прокручування. Установіть 0 на панелі Animation.
  • Ефект запускається під час наведення поруч з елементом. Parent number має значення 1, тому батьківський елемент слухає вказівник. Установіть Parent number у значення 0.

Що далі?

  • Ефекти наведення: змінюйте кольори, тіні або прозорість, поки вказівник лишається на елементі.
  • Фони: надайте анімованому розділу колір, фото або градієнт.
  • Макет каруселі: відтворюйте ефекти On trigger щоразу, коли відкривається слайд.