Вы наверное замечали, что нет анимации в бесплатных темах Mobirise. Нет, речь не идет о каких то анимированных элементах, которые утяжеляют вес сайта и делают его медленным. Речь о простых и приятных мелочах. Например, подпрыгивающий текст для привлечения внимания, выдвижной слайдер, мигающая кнопка пару раз. Все это, легкая анимация, которая не создает большой нагрузки на ваш сайт, при этом, позволяет создать более привлекательные элементы на сайте. И если у вас есть опыт работы с HTML-кодом, CSS-стилями и написанием скриптов, вы с легкостью можете создать нужный вам анимационный эффект на сайте, без сторонних расширений. Однако, очень удобно, если есть готовые блоки, где можно без правки кода и особых знаний, создавать интересные и легкие анимационные эффекты на сайте. Все что нужно, это не переборщить с анимацией и добавлять ее только там, где это нужно. Иначе, сайт превратиться в новогоднюю елку).
Итак, мы рассмотрим дополнение для Mobirise, которое позволяет создавать анимацию в определенных блоках. Данное дополнение, предоставлено разработчиком официально в открытом доступе. Его не нужно скачивать с непонятных ресурсов. Интерфейс расширения, на английском. Но, не пугаемся, там все интуитивно понятно и просто. Язык вообще не нужен. Ниже, мы рассмотрим где скачать расширение с анимацией для Mobirise, как его установить и рассмотрим принцип использования.
Примечание. На версиях Mobirise 5 и выше, при установке данного дополнения, могут возникнуть трудности при редактировании многоуровневого меню на сайте.
На сайтах с обычным меню
не
было замечено проблем. Также, данное расширение, не вызывает никаких
проблем с использованием многоуровневого меню в программе Mobirise 4-й
версии. В любом случае, всегда создавайте резервные копии профиля и проектов в Mobirise. Аналогичная проблема с меню, наблюдается и при использовании блоков из данной заметки.
Анимация для блоков Mobirise.
Заходим на официальный сайт https://casper55.ru/animate-css/
На открывшейся странице «Animate CSS on Scroll», нажимаем кнопку «FREE DOWNLOAD PACK»:
Предварительно, вы можете посмотреть демо-материал. Здесь, показана вся анимация, которая доступна для блоков. Изучив HTML код страницы, вы можете самостоятельно реализовать подобные эффекты, при помощи редактора кода, без установки данного расширения.
И можно посмотреть один из примеров использования анимации в блоке Mobirise.
После загрузки расширения «Animate CSS», необходимо его установить.
После установки, мы можем выбирать блоки (1.) из раздела «Animate CSS» (2.):
В своем примере, выберу блок «Accordions»:
Теперь, открываем настройки блока:
В открывшемся меню настроек, раскрываем список напротив параметра «Conteiner» (1.) и в открывшемся списке, выбираем (2.) анимацию для блока.
Смотрим на результат и подбираем нужный вариант. Принцип настроек, одинаковый для всех доступных блоков. Есть и другие настройки. Пробуйте и настраивайте под свои задачи. В разных блоках, это все выглядит по разному.
Отдельно, стоит обратить внимание, что данное расширение анимации для Mobirise, не добавляет новых блоков. Все доступные блоки в разделе блоков «Animate CSS», используют стандартные блоки ,которые доступны в вашей программе Mobirise. Например, если у вас только бесплатная версия Mobirise у вас будут доступны только данные блоки. Если у вас установлены дополнительные темы Mobirise, будут подтянуты блоки и для них.
Перед любыми экспериментами, всегда создавайте резервные копии. Также, не забываем чистить кэш браузера, когда проверяете результат в браузере.
Если появятся битые ссылки или поправки, дополнения, вопросы... Оставляйте комментарии.
Как видим, благодаря сторонним расширениям, которые есть в свободном доступе и совершенно легально, можно расширить значительно базовый функционал бесплатной версии Mobirise. Если вы, только начинаете создавать сайт для себя или на заказ, не опускайте руки. В следующей заметке, рассмотрим очередное дополнение Mobirise, которое создает эффект при скролле страницы. Желаю успехов, в освоении Mobirise.