На нашем сайте мы используем cookie для сбора информации технического характера и обрабатываем IP-адрес вашего местоположения. Продолжая использовать этот сайт, вы даете согласие на использование файлов cookies. Здесь вы можете узнать, как мы пользуемся файлами cookies.
Я согласен
логотип upread.ru

Совпадение стилей, или решение проблемы с 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

Читайте также:




Ошибка ArrayIndexOutOfBoundsException Java
jQuery - это просто!


© upread.ru 2013-2019
При перепечатке активная ссылка на сайт обязательна.
Задать вопрос
письмо
Здравствуйте! Вы можете задать мне любой вопрос. Если не получается отправить сообщение через эту форму, то пишите на почу up777up@yandex.ru
Отправляя сообщение я подтверждаю, что ознакомлен и согласен с политикой конфиденциальности данного сайта.