TechBlogSD - Все для WordPress и WEB разработки
WEB и WordPress инструкции, новости, обзоры тем и плагинов

Joomla 3 – Отключение анимации JSN PageBuilder (Scrollreveal) для мобильных устройств

1 062

Если у Вас сайт на CMS Joomla 3 и установлен модуль JSN Page Builder уверен Вам будет интересно узнать, как отключить анимацию объектов (созданных при помощи JSN Page Builder) при отображении сайта на мобильных устройствах.

Не много терминологии:

Joomla 3 — Joomla представляет собой бесплатную систему для создания веб-сайтов. Это проект с открытым исходным кодом, который, как и большинство подобных проектов, не стоит на месте. Он очень успешно развивается, в течение вот уже семи лет, и пользуется популярностью у миллионов пользователей по всему миру.

Загрузить можно здесь: http://joomla.ru/downloads

JSN PageBuilder — это самый простой способ для создания и управления страницами в Joomla. Просто перетащите подходящие элементы, и постройте содержание страницы визуально без каких — либо строк кода, получив мгновенное представление о том, что происходит на странице в режиме предварительного просмотра. При помощи данного плагин Вы получение полностью отзывчивую страницу с удобной компоновкой содержимого и потрясающими стилями. С данным плагином создание страниц становится быстрым, простым и удобным.

Купить плагин можно здесь: https://www.joomlashine.com/joomla-extensions/jsn-pagebuilder-joomla-page-builder-extension.html

Для создания красивого эффекта пролистывания (то есть элементы страницы красиво анимируются, появляются и исчезают вовремя скроллинга страницы) JSN PageBuilder использует специальную разработку под названием scrollreveal.

Scrollreveal — это библиотека JavaScript, которая анимирует HTML – элементы страницы. Анимация активируется , когда пользователь прокручивает веб – страницы сроклом мышки.

Страница демо: https://scrollrevealjs.org/

Страница на GitHub**:** https://github.com/jlmakes/scrollreveal.js

Страница с подробной инструкцией по подключению (на английском языке): http://jstricks.com/scroll-reveal-animation-html-elements-scrollreveal-js/

Отключение анимации

И так приступим к отключению анимации для мобильных устройств, в моем случае необходимо запретить анимацию для устройств размер экрана которых мене чем 780 пикселей.

На сайте под управлением Joomla установлен бесплатный шаблон TX Zenith

Ссылка на шаблон: http://joomlarulit.com/shabloni-joomla/item/307-tx-zenith-besplatnyiy-shablon-joomla-30.html

Перейдем по пути:

ИМЯ_САЙТАtemplatestx_zenithindex.php

Далее откроем файл и подключим в header файл библиотеки jquery.min.js:

Теперь вставим перед Java скрипт, который аннулирует анимацию:

Как видите в коде указано отключение стилей анимации.

Переделываем scrollReveal

Стоит отметить что версия файла scrollReveal.js используемая в JSN PageBuilder весьма отличается от последней разработанной версии автора scrollReveal на github.

Переделаем файл scrollReveal.js который находится в папке:
ИМЯ_САЙТАpluginssystempagebuilderassets3rd-partyscrollrevealscrollReveal.js

Откройте файл scrollReveal.js и все содержимое файла поместите в данный блок:

То есть файл scrollReveal.js после внесения изменений должен иметь приблезительно такой вид (приблизительно так как мне не известно какую версию JSN PageBuilder плагина Вы используете)

На этом все, после внесения всех изменений анимация и крутой скролинг будут отключены для мобильных устройств, за то при просмотре сайта на ПК все плюшки анимированного веб кит’а будут присутствовать. Если у Вас нет плагина JSN Page Builder стучитесь в личку, у меня есть несколько не активированных лицензий (могу продать).

Источник записи: https://mediadoma.com

Этот веб-сайт использует файлы cookie для улучшения вашего опыта. Мы предполагаем, что вы согласны с этим, но вы можете отказаться, если хотите. Принимаю Подробнее