Вход / Регистрация

Создайте сайт прямо сейчас!

Зарегистрируйтесь по ссылкам и получите дополнительные бонусы при создании сайта



  • Персональный перечень способов заработка на сайте именно вашей тематики
  • Аудит юзабилити сайта бесплатно $20
  • Набор скриптов на сумму $40 для увеличения продаж
  • Аудит юзабилити интернет магазина бесплатно $60

Как получить бонусы?


Как только вы создадите сайт по одной из указанных ссылок, я увижу это в отчете партнерской программы:

После оплаты одного из пакетов, отправьте запрос на info@ucozmagazines.ru с указанием адреса созданного сайта.

Плавная подгрузка товаров при прокрутке страницы

Сергей    23.05.2014    8095    5.0 из 5.0 (7)

Оцените материал:

    О чем здесь?

    Применяем эффект красивой плиточной анимации при прокрутке каталога товаров в интернет магазине uCoz. Материал подготовлен при помощи статьи Создание плиточной анимации на сайте www.dejurka.ru.

    Плавная подгрузка товаров при прокрутке страницы


    Требования к каталогу

    В первую очередь, нужно убедиться, что все товары в каталоге обернуты в div с классом .list-item:

    В данный момент, класс добавляется автоматически и делать для этого ничего не требуется. Если в какой-то момент эффект перестанет работать, причина может быть в том, что класс больше не добавляется.

    Если вы испытываете трудности при работе с каталогом товаров uCoz, обратите внимание на этот урок.

    jQuery

    Убедимся, что у нас подключена библиотека jQuery, Панель управления - Настройки - Общие настройки:

    Версия библиотеки 1.7.2 или 1.10.2.

    Теперь скачиваем плагин Appear и загружаем на свой сайт через файловый менеджер или FTP (по этой теме есть урок). Подключаем плагин на страницах каталога в управлении дизайном по ссылке /panel/?a=tmpl;m=20;t=2 (перед закрывающим тегом body). Например:

    <script type='text/javascript' src="/js/jquery.appear.js"></script>

    Теперь напишем код jQuery, который будет добавлять классы объектам, попавшим в область видимости пользователя.

    <script type='text/javascript'>
    $(function() {
     $(document.body).on('appear', '.list-item', function(e, $affected) {
     $(this).addClass("appeared");
     });
     $('.list-item').appear({force_process: true});
    });
    </script>
    

    Принцип работы: как только div с .list-item появляется в области видимости экрана, этому контейнеру добавляется класс .appeared и div становится видимым.

    Настраиваем таблицу стилей (CSS)

    Добавим стили в CSS интернет магазина /panel/?a=tmpl;m=20;t=9:

    .list-item {
     -webkit-transition: all 400ms ease;
     -moz-transition: all 400ms ease;
     -o-transition: all 400ms ease;
     transition: all 400ms ease;
     -webkit-transform: translate3d(0px, 100px, 0) rotateX(-30deg) scale(1.25, 1.25);
     -moz-transform: translate3d(0px, 100px, 0) rotateX(-30deg) scale(1.25, 1.25);
     transform: translate3d(0px, 100px, 0) rotateX(-30deg) scale(1.25, 1.25);
     opacity: 0;
    }
    .list-item.appeared{
     -webkit-transform: translate3d(0px, 0px, 0px) rotateX(0) scale(1, 1);
     -moz-transform: translate3d(0px, 0px, 0px) rotateX(0) scale(1, 1);
     transform: translate3d(0px, 0px, 0px) rotateX(0) scale(1, 1);
     opacity: 1;
    } 
    

    Готово!

    Иногда есть смысл применять такой эффект только для страницы "Все товары". В таком случае, добавьте условный оператор, который будет подключать плагин при $PAGE_ID$ = 'allGoods' (урок по условным операторам).

    Статьи по теме

    Обсуждение

    Всего комментариев: 13

    k
    1
    Сергей, а вот вопрос, все установил все работает, как сделать чтобы при сортировки или фильтрации автоскролл был, а то клиент нажимает фильтр, а там пусто, надо скрол сделать чтобы товар подгрузился
    avatar
    0
    2
    Извиняюсь, но я не совсем понял суть вопроса. Автоскролл куда? Может дадите посмотреть, что получилось?
    k
    3
    Сергей, вот пример http://dimaxi.ru/shop/igrushki/igrushki-dlja-malenkikh  если вы нажмете на сортировку по цене или по дате добавления ( то же самое с фильтрами, просто они у меня убраны , что бы не пугать) то увидите, чтобы появился товар, надо сделать скрол мышкой ( страницу ниже провести хоть на миллиметр)
    avatar
    0
    4
    Да, есть такая проблема. Пока затрудняюсь ответить. Вероятно самым простым (но не самым красивым) выходом будет по нажатию на кнопку сортировки двигать скроллом
    M
    5
    Попробовал установить. Работает. Но если отключать условными операторами работу скрипта на странице - пропадают все товары.
    avatar
    0
    6
    Если отключаете условными операторами скрипт, то и не забудьте изменить css блоков. Свойство opacity: 0; делает их совсем прозрачными.
    M
    7
    А как это можно сделать, чтобы к страницам на которых отключаем скрипт, на применялся измененный css?
    avatar
    8
    А можно помощь!? НЕ работает скрипт !( 
    Установил все как описано... 
    в итоге ничего не изменилось
    http://salviafarm.kiev.ua/shop/mama-i-malysh
    avatar
    0
    9
    Проблема в том, что Вы используете решение, которое из контейнеров .list-item перемещает все в другие адаптивные контейнеры.

    Код

    <script type='text/javascript'>
    $(function() {
      $(document.body).on('appear', '.product-layout', function(e, $affected) {
      $(this).addClass("appeared");
      });
      $('.product-layout').appear({force_process: true});
    });
    </script>


    И в стилях CSS соответственно:
    Код

    .product-layout {
      -webkit-transition: all 400ms ease;
      -moz-transition: all 400ms ease;
      -o-transition: all 400ms ease;
      transition: all 400ms ease;
      -webkit-transform: translate3d(0px, 100px, 0) rotateX(-30deg) scale(1.25, 1.25);
      -moz-transform: translate3d(0px, 100px, 0) rotateX(-30deg) scale(1.25, 1.25);
      transform: translate3d(0px, 100px, 0) rotateX(-30deg) scale(1.25, 1.25);
      opacity: 0;
    }
    .product-layout.appeared{
      -webkit-transform: translate3d(0px, 0px, 0px) rotateX(0) scale(1, 1);
      -moz-transform: translate3d(0px, 0px, 0px) rotateX(0) scale(1, 1);
      transform: translate3d(0px, 0px, 0px) rotateX(0) scale(1, 1);
      opacity: 1;
    }  
    avatar
    10
    Сергей, теперь стала работать плавная подгрузка товаров, но в рамках только указанной страницы, а дальше плавная подгрузка остальных страниц не идет...
    вот: 
    http://salviafarm.kiev.ua/shop/mama-i-malysh
    avatar
    0
    11
    Вероятно, надо в скрипт добавить следующее
    
    Код
    $(document).ajaxComplete(function( event, xhr, settings ) {
       $('.product-layout').appear({force_process: true});  
    });
    avatar
    12
    Все равно не выходит!
    Ладно, спасибо, не буду отбирать время у вас...
    Продолжим работу без этого!)
    avatar
    0
    13
    Попробуйте использовать штатную настройку в модуле магазина. Она работает также.
    Плавная подгрузка товаров при прокрутке страницы
    Плавная подгрузка товаров при прокрутке страницы