Анимация joomla 4

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

Добавление анимации в 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. Переопределение модуля - загрузить файл cta.php в папку ваш_шаблон/html/mod_custom
  4. В админке создаете новый модуль HTML-код, пишите нужный вам текст, в настройках модуля выбираете макет cta. Готово! Наш модуль выезжает слева в момент прокрутки страницы. Скорость и задержу можно изменять в user.css.
    • Для изменение направления движения - в файле user.css измените или добавьте название класса в правило @keyframes - In, Out, Left, Right, Zoom etc. Также измените название класса и в файле cta.php.

В архиве для скачивания находится готовый код только для макета, который описан выше. Чтобы создать свою анимацию, смотри примеры на сайте Animate.css. Чтобы анимация появлялась на экране в момент прокручивания страницы, необходимо подключать код javascript и вызвать его в файле модуля или страницы _.php

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

Выезжающая панель слева

Сделано на AOS.css и AOS.js

Выезжающая панель AOS справа

Классы в контенте модуля