Совпадение стилей, или решение проблемы с OpenCart

Довольно часто мне приходится помогать в решении проблем с такой CMS как OpenCart. Можно даже сказать не проблем, а задач. Хотя и проблемы бывают. Не так давно заказчик попросил на главной странице интернет магазина на опенкарт сделать при скроллинге (прокрутке страницы) появление текстовых блоков с различными эффектами. Ну там справа выезжать, слева, увеличиваться.

Для картинок в общем есть отличное решение, называемое lazy loading – ленивая загрузка. Но тут именно текстовые блоки. Быстрый поиск по гуглу дал решение - scroll-effects, основной файл - viewportchecker.js. Тестовый код работал прекрасно, осталось перенести на опенкарт.

тут проблем не должно было возникнуть, все понятно. Переходим в Модули, потом опять в модули и меняем (или добавляем) блок HTML на главную страницу. К дивам добавляем определённый класс, подключаем файлы стиля и скрипта и смотрим результат.

А результат не очень. Первая часть программы выполнена успешно - блоки скрылись. Вторая – блоки не появились. Начинаем разбираться. Оказывается, скрипт использует класс hidden, которому также ставит свой стиль бутстрап. Наш скрипт делает его невидимым (opacity: 0;), а бутстрап ставить display:none;.

Что ж, тут можно пойти двумя путями: изменить класс, например, на hidden2 или же перебить стиль бутстрапа. Пробуем оба – не работает. Ладно, время не хочется тратить, лучше попробуем найти другой скрипт, не конфликтующий с бутстрапом. И такой после недолгих поисков найден.

Скрипт (плагин) называется Revealator. Подключается двумя строчками:

<link rel="stylesheet" href="fm.revealator.jquery.css">
<script src="js/fm.revealator.jquery.js">

А затем каждому диву, который необходимо показывать с анимацией при прокрутке страницы добавляем несколько классов. Например, так:

<div class=”revealator-slideup revealator-delay1”>Тут текст, появляющийся снизу с задержкой в 100мс</div>

По названиям классов несложно догадаться, какие эффекты они добавляют:

• revealator-fade
• revealator-rotateleft
• revealator-rotateright
• revealator-slideleft
• revealator-slideright
• revealator-slideup

Чтобы обратно не исчезало при прокрутке вверх, добавляем класс revealator-once. Можете поиграться и с другими параметрами.

Пример видео:



Итак, если вам требуется какая-либо помощь по сайтам вообще, эффектам анимации или с OpenCart в частности, то пишите мне. За небольшую сумму я вам помогу. Не только все сделаю, но и научу вас работать с сайтами самостоятельно.
заметки, анимация, сайтостроение, jquery