»
Joomla

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

Если у Вас сайт на 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:

<!--=====Отключение анимации для мобильных устройств //- подключение jquery.min.js для отработки скрипта -//--> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <!--=====Отключение анимации для мобильных устройств //- подключение jquery.min.js для отработки скрипта -//-->

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

<script> /*=====Отключение анимации для мобильных устройств //- Скрипт срабатывает при разрешении менее 780px -//*/ if ( $(window).width() <= 780) { var style = document.createElement('style'); style.type = 'text/css'; style.innerHTML = '* {' + '/*CSS transitions*/' + ' -o-transition-property: none !important;' + ' -moz-transition-property: none !important;' + ' -ms-transition-property: none !important;' + ' -webkit-transition-property: none !important;' + ' transition-property: none !important;' + '/*CSS transforms*/' + ' -o-transform: none !important;' + ' -moz-transform: none !important;' + ' -ms-transform: none !important;' + ' -webkit-transform: none !important;' + ' transform: none !important;' + ' /*CSS animations*/' + ' -webkit-animation: none !important;' + ' -moz-animation: none !important;' + ' -o-animation: none !important;' + ' -ms-animation: none !important;' + ' animation: none !important;}'; var style = document.createElement('style'); style.type = 'text/css'; style.innerHTML = '* {' + '/*CSS transitions*/' + ' -o-transition-property: none !important;' + ' -moz-transition-property: none !important;' + ' -ms-transition-property: none !important;' + ' -webkit-transition-property: none !important;' + ' transition-property: none !important;' + '/*CSS transforms*/' + ' -o-transform: none !important;' + ' -moz-transform: none !important;' + ' -ms-transform: none !important;' + ' -webkit-transform: none !important;' + ' transform: none !important;' + ' /*CSS animations*/' + ' -webkit-animation: none !important;' + ' -moz-animation: none !important;' + ' -o-animation: none !important;' + ' -ms-animation: none !important;' + ' animation: none !important;}'; document.getElementsByTagName('head')[0].appendChild(style); } /*=====Отключение анимации для мобильных устройств //- Скрипт срабатывает при разрешении менее 780px -//*/ </script>

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

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

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

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

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

/*=====Отключение анимации для мобильных устройств //- Скрипт срабатывает при разрешении менее 780px -//*/ if ( $(window).width() >= 780) { //СТАРОЕ СОДЕРЖИМОЕ ФАЙЛА } /*=====Отключение анимации для мобильных устройств //- Скрипт срабатывает при разрешении менее 780px -//*/

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

/*=====Отключение анимации для мобильных устройств //- Скрипт срабатывает при разрешении менее 780px -//*/ if ( $(window).width() >= 780) { (function(root, factory) { if (typeof define === 'function' && define.amd) { define(factory); } else if (typeof exports === 'object') { module.exports = factory(require, exports, module); } else { root.scrollReveal = factory(); } }(this, function(require, exports, module) { /* _ _ _____ _ _ | | | __ | | (_) ___ ___ _ __ ___ | | | |__) |_____ _____ __ _| | _ ___ / __|/ __| '__/ _ | | | _ // _ / / _ / _` | | | / __| __ (__| | | (_) | | | | __/ V / __/ (_| | |_| __ |___/___|_| ___/|_|_|_| ____| _/ ___|__,_|_(_) |___/ v.0.1.2 _/ | |__/ "Declarative on-scroll reveal animations." /*============================================================================= scrollReveal.js was inspired by cbpScroller.js (c) 2014 Codrops. Licensed under the MIT license. http://www.opensource.org/licenses/mit-license.php =============================================================================*/ /*! scrollReveal.js v0.1.2 (c) 2014 Julian Lloyd | MIT license */ /*===========================================================================*/ window.scrollReveal = (function (window) { 'use strict'; function scrollReveal(options) { this.docElem = window.document.documentElement; this.options = this.extend(this.defaults, options); this.styleBank = []; if (this.options.init == true) this.init(); } scrollReveal.prototype = { defaults: { after: '0s', enter: 'bottom', move: '24px', over: '0.66s', easing: 'ease-in-out', // if 0, the element is considered in the viewport as soon as it enters // if 1, the element is considered in the viewport when it's fully visible viewportFactor: 0.33, // if false, animations occur only once // if true, animations occur each time an element enters the viewport reset: false, // if true, scrollReveal.init() is automaticaly called upon instantiation init: true }, /*=============================================================================*/ init: function() { this.scrolled = false; var self = this; // Check DOM for the data-scrollReveal attribute // and initialize all found elements. this.elems = Array.prototype.slice.call(this.docElem.querySelectorAll('[data-scroll-reveal]')); this.elems.forEach(function (el, i) { // Capture original style attribute if (!self.styleBank[el]) { self.styleBank[el] = el.getAttribute('style'); } self.update(el); }); var scrollHandler = function () { if (!self.scrolled) { self.scrolled = true; setTimeout(function () { self._scrollPage(); }, 60); } }; var resizeHandler = function () { // If we're still waiting for settimeout, reset the timer. if (self.resizeTimeout) { clearTimeout(self.resizeTimeout); } function delayed() { self._scrollPage(); self.resizeTimeout = null; } self.resizeTimeout = setTimeout(delayed, 200); }; window.addEventListener('scroll', scrollHandler, false); window.addEventListener('resize', resizeHandler, false); }, /*=============================================================================*/ _scrollPage: function () { var self = this; this.elems.forEach(function (el, i) { self.update(el); }); this.scrolled = false; }, /*=============================================================================*/ parseLanguage: function (el) { // Splits on a sequence of one or more commas or spaces. var words = el.getAttribute('data-scroll-reveal').split(/[, ]+/), parsed = {}; function filter (words) { var ret = [], blacklist = [ "from", "the", "and", "then", "but", "with" ]; words.forEach(function (word, i) { if (blacklist.indexOf(word) > -1) { return; } ret.push(word); }); return ret; } words = filter(words); words.forEach(function (word, i) { switch (word) { case "enter": parsed.enter = words[i + 1]; return; case "after": parsed.after = words[i + 1]; return; case "wait": parsed.after = words[i + 1]; return; case "move": parsed.move = words[i + 1]; return; case "ease": parsed.move = words[i + 1]; parsed.ease = "ease"; return; case "ease-in": parsed.move = words[i + 1]; parsed.easing = "ease-in"; return; case "ease-in-out": parsed.move = words[i + 1]; parsed.easing = "ease-in-out"; return; case "ease-out": parsed.move = words[i + 1]; parsed.easing = "ease-out"; return; case "over": parsed.over = words[i + 1]; return; default: return; } }); return parsed; }, /*=============================================================================*/ update: function (el) { var css = this.genCSS(el); var style = this.styleBank[el]; if (style != null) style += ";"; else style = ""; if (!el.getAttribute('data-scroll-reveal-initialized')) { el.setAttribute('style', style + css.initial); el.setAttribute('data-scroll-reveal-initialized', true); } if (!this.isElementInViewport(el, this.options.viewportFactor)) { if (this.options.reset) { el.setAttribute('style', style + css.initial + css.reset); } return; } if (el.getAttribute('data-scroll-reveal-complete')) return; if (this.isElementInViewport(el, this.options.viewportFactor)) { el.setAttribute('style', style + css.target + css.transition); // Without reset enabled, we can safely remove the style tag // to prevent CSS specificy wars with authored CSS. if (!this.options.reset) { setTimeout(function () { if (style != "") { el.setAttribute('style', style); } else { el.removeAttribute('style'); } el.setAttribute('data-scroll-reveal-complete',true); }, css.totalDuration); } return; } }, /*=============================================================================*/ genCSS: function (el) { var parsed = this.parseLanguage(el), enter, axis; if (parsed.enter) { if (parsed.enter == "top" || parsed.enter == "bottom") { enter = parsed.enter; axis = "y"; } if (parsed.enter == "left" || parsed.enter == "right") { enter = parsed.enter; axis = "x"; } } else { if (this.options.enter == "top" || this.options.enter == "bottom") { enter = this.options.enter axis = "y"; } if (this.options.enter == "left" || this.options.enter == "right") { enter = this.options.enter axis = "x"; } } // After all values are parsed, let’s make sure our our // pixel distance is negative for top and left entrances. // // ie. "move 25px from top" starts at 'top: -25px' in CSS. if (enter == "top" || enter == "left") { if (parsed.move) { parsed.move = "-" + parsed.move; } else { parsed.move = "-" + this.options.move; } } var dist = parsed.move || this.options.move, dur = parsed.over || this.options.over, delay = parsed.after || this.options.after, easing = parsed.easing || this.options.easing; var transition = "-webkit-transition: -webkit-transform " + dur + " " + easing + " " + delay + ", opacity " + dur + " " + easing + " " + delay + ";" + "transition: transform " + dur + " " + easing + " " + delay + ", opacity " + dur + " " + easing + " " + delay + ";" + "-webkit-perspective: 1000;" + "-webkit-backface-visibility: hidden;"; // The same as transition, but removing the delay for elements fading out. var reset = "-webkit-transition: -webkit-transform " + dur + " " + easing + " 0s, opacity " + dur + " " + easing + " " + delay + ";" + "transition: transform " + dur + " " + easing + " 0s, opacity " + dur + " " + easing + " " + delay + ";" + "-webkit-perspective: 1000;" + "-webkit-backface-visibility: hidden;"; var initial = "-webkit-transform: translate" + axis + "(" + dist + ");" + "transform: translate" + axis + "(" + dist + ");" + "opacity: 0;"; var target = "-webkit-transform: translate" + axis + "(0);" + "transform: translate" + axis + "(0);" + "opacity: 1;"; return { transition: transition, initial: initial, target: target, reset: reset, totalDuration: ((parseFloat(dur) + parseFloat(delay)) * 1000) }; }, getViewportH : function () { var client = this.docElem['clientHeight'], inner = window['innerHeight']; return (client < inner) ? inner : client; }, getOffset : function(el) { var offsetTop = 0, offsetLeft = 0; do { if (!isNaN(el.offsetTop)) { offsetTop += el.offsetTop; } if (!isNaN(el.offsetLeft)) { offsetLeft += el.offsetLeft; } } while (el = el.offsetParent) return { top: offsetTop, left: offsetLeft } }, isElementInViewport : function(el, h) { var scrolled = window.pageYOffset, viewed = scrolled + this.getViewportH(), elH = el.offsetHeight, elTop = this.getOffset(el).top, elBottom = elTop + elH, h = h || 0; return (elTop + elH * h) <= viewed && (elBottom) >= scrolled || (el.currentStyle? el.currentStyle : window.getComputedStyle(el, null)).position == 'fixed'; }, extend: function (a, b){ for (var key in b) { if (b.hasOwnProperty(key)) { a[key] = b[key]; } } return a; } }; // end scrollReveal.prototype return scrollReveal; })(window); return scrollReveal; })); } /*=====Отключение анимации для мобильных устройств //- Скрипт срабатывает при разрешении менее 780px -//*/

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

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

Связанные записи
JoomlaWEBWordPressПлагиныПолезные сайты

Обзор уникального конструктора страниц Nicepage 2020 (WordPress, Joomla, HTML и не только)

JoomlaWordPress

Миграция из Joomla! на WordPress, с переносом K2 материалов

Joomla

Joomla — добавление материала на сайт

Joomla

Полезные команды SQL