Анимация с помощью css и js

Выезжающие панели и всплывающие окна нравятся всем. Такой эффект достигается анимацией элемента. Она бывает статической видимой и запоздалой появляющейся.

Добавление анимации в joomla-4

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

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

1. Непосредственно в базовый файл .php модуля.
2. В редакторе материала для необходимого объекта в тексте.

К примеру, я использую выезжающую панель 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 не рекомендуется использовать слишком много интерактивных элементов, это негативно влияет на поведенческие факторы пользователя.

Скачать и разархивировать файлы на свой компьютер. Следовать инструкции, описанной выше.