--- url: 'https://dxpr.com/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD/%D0%B0%D0%BD%D1%96%D0%BC%D0%B0%D1%86%D1%96%D1%8F' title: 'Анімація елементів під час прокручування, наведення чи натискання | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T19:58:48+00:00' updated: '2026-10-24T20:08:10+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- Ви можете змусити рухатися розділ, рядок або будь-який елемент вмісту. Заставте заголовок плавно з’явитися знизу під час прокручування, кнопку трохи пізніше, а піктограму пульсувати під час наведення. Кожен з них має панель Animation у своїх налаштуваннях. У прикладі заголовок плавно з’являється, а за ним із короткою затримкою з’являється кнопка реєстрації. У відео кнопка та заголовок плавно з’являються, коли розділ потрапляє в поле зору. tags: - 'Design guides' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T20:08:10+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Анімація елементів під час прокручування, наведення чи натискання' description: |- Ви можете змусити рухатися розділ, рядок або будь-який елемент вмісту. Заставте заголовок плавно з’явитися знизу під час прокручування, кнопку трохи пізніше, а піктограму пульсувати під час наведення. Кожен з них має панель Animation у своїх налаштуваннях. У прикладі заголовок плавно з’являється, а за ним із короткою затримкою з’являється кнопка реєстрації. У відео кнопка та заголовок плавно з’являються, коли розділ потрапляє в поле зору. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T19:58:48+0000' dateModified: '2026-10-24T20:08:10+0000' author: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' mainEntityOfPage: 'https://dxpr.com/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD/%D0%B0%D0%BD%D1%96%D0%BC%D0%B0%D1%86%D1%96%D1%8F' articleSection: 'Посібники з дизайну' - '@type': WebPage '@id': 'https://dxpr.com/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD/%D0%B0%D0%BD%D1%96%D0%BC%D0%B0%D1%86%D1%96%D1%8F' description: |- Ви можете змусити рухатися розділ, рядок або будь-який елемент вмісту. Заставте заголовок плавно з’явитися знизу під час прокручування, кнопку трохи пізніше, а піктограму пульсувати під час наведення. Кожен з них має панель Animation у своїх налаштуваннях. У прикладі заголовок плавно з’являється, а за ним із короткою затримкою з’являється кнопка реєстрації. У відео кнопка та заголовок плавно з’являються, коли розділ потрапляє в поле зору. breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Home item: 'https://dxpr.com/uk' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: uk --- [Help Center](/uk/hc)/[Documentation](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F) /[Вивчення DXPR Builder](/uk/hc/documentation/learn-dxpr-builder) /[Створення сторінок](/uk/hc/documentation/learn-dxpr-builder/build) /[Стилізація елементів](/uk/hc/documentation/learn-dxpr-builder/element-settings) /[Посібники з дизайну](/uk/hc/documentation/learn-dxpr-builder/design/overview) # Анімація елементів під час прокручування, наведення чи натискання. Вивчення DXPR BuilderСтворення сторінокСтилізація елементівПосібники з дизайну ## In this guide Related guides - [Змусьте елементи реагувати на наведення](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD/%D0%B5%D1%84%D0%B5%D0%BA%D1%82%D0%B8-%D0%BD%D0%B0%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%BD%D1%8F) - [Надайте розділу кольоровий фон, фон із фото або градієнтом](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD/%D1%84%D0%BE%D0%BD%D0%B8) - [Додавання макета каруселі](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%BC%D0%B0%D0%BA%D0%B5%D1%82/%D0%BC%D0%B0%D0%BA%D0%B5%D1%82-%D0%BA%D0%B0%D1%80%D1%83%D1%81%D0%B5%D0%BB%D1%96) Ви можете змусити рухатися розділ, рядок або будь-який елемент вмісту. Заставте заголовок плавно з’явитися знизу під час прокручування, кнопку трохи пізніше, а піктограму пульсувати під час наведення. Кожен з них має панель **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. ## Що далі? - [Ефекти наведення](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD/%D0%B5%D1%84%D0%B5%D0%BA%D1%82%D0%B8-%D0%BD%D0%B0%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%BD%D1%8F): змінюйте кольори, тіні або прозорість, поки вказівник лишається на елементі. - [Фони](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD/%D1%84%D0%BE%D0%BD%D0%B8): надайте анімованому розділу колір, фото або градієнт. - [Макет каруселі](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%BC%D0%B0%D0%BA%D0%B5%D1%82/%D0%BC%D0%B0%D0%BA%D0%B5%D1%82-%D0%BA%D0%B0%D1%80%D1%83%D1%81%D0%B5%D0%BB%D1%96): відтворюйте ефекти **On trigger** щоразу, коли відкривається слайд.