Анімація за допомогою css та js

Панелі, що виїжджають, і спливаючі вікна подобаються всім. Такий ефект досягається анімацією елемента. Вона буває статичною видимою і затримка видимості.

Додавання анімації вjoomla-4

Статичну роблять простим кодом на css за допомогою правила @keyframes. Динамічна анімація з'являється на сторінці під час прокручування екрана за допомогою скрипту та складається з двох файлів - css и js.
Скриптів анімації досить багато на просторах інтернету, я перепробував усе. Вибрав Animate.css. Під час розробки сайту підключаю весь скрипт, тестую на різних елементах. Далі вибираю вподобану анімацію і тільки цей маленький шматочок коду додаю до свого файлу css.

На сайт скрипт анімації можна додавати кількома способами.

1. Безпосередньо в базовий файл .php модуля.
2. В Редакторi матеріалу для необхідного об'єкта в тексті.

Наприклад, я використовую панель, що виїжджає CTA (Call to action). Вона є на багатьох сайтах і визнана фахівцями digital-marketing ефективним інструментом комунікації з клієнтом.

1. Анімація AOS.css - копіюємо код у свій файл user.css
2. Дія AOS.js - копіюємо код у свій файл user.js
3. Перевизначення модуля – завантажити файл aos.php у папку ваш_шаблон/html/mod_custom
4. В адмінці створюєте новий модуль HTML-код, пишіть потрібний вам текст, додаєте клас та атрибут анімації

   class="aos-js" data-aos-name="fadeInLeft"

5. У налаштуваннях модуля вибираєте макет aos. Готово! Наш модуль виїжджає зліва в момент прокручування сторінки. Швидкість та затримку можна змінювати в user.css.
6. У моєму файлі aos.css наведено 5 різних класів анімації. - In, Up, Left, Right, Down. Вибирайте, спробуйте. Більше прикладів дивись на сайті Animate.css.
7. Щоб анімація з'являлася на екрані в момент прокручування сторінки, необхідно викликати javascript у файлі модуля: приклад дивись у aos.php

<script>
	const aos = new AOS();
</script>

Якщо ви бажаєте використовувати на сторінці кілька модулів з анімацією, тоді виклик скрипта необхідно підключити до файлу сторінки default.php. Фахівці SEO не рекомендують використовувати занадто багато інтерактивних елементів, це негативно впливає на поведінкові фактори користувача.

Завантажити та розархівувати файли на свій комп'ютер. Дотримуйтесь інструкцій, описаних вище.