Категория:
Опубликовано:

Плагин jQuery Viewport Checker

Полное описание всех функций плагина jQuery Viewport Checker.

Скачать плагин можно с Git'а.

Пример использования:

jQuery(document).ready(function($) {
  $('.dummy').viewportChecker();
});

Более детальный пример: Анимация блоков при прокрутке.

Список настроек

jQuery(document).ready(function($) {
  $('div').viewportChecker({
      classToAdd: 'visible',
      classToRemove: 'invisible',
      offset: [100 OR 10%],
      invertBottomOffset: true,
      repeat: false,
      callbackFunction: function(elem, action){},
      scrollHorizontal: false
  });
});
  • classToAdd - Класс добавляемый элементу когда тот появляется в области просмотра. Список классов через пробел, берется в кавычки.
  • classToRemove - Класс, удаляемый перед применением "classToAdd" к элементу. Список классов через пробел, берется в кавычки.
  • offset - Задержка появления элементов, относительно просматриваемой области. Указывается числом (значение в пикселях). Можно указывать процентное соотношение (указывать в кавычках, со знаком "%")
  • invertBottomOffset - Делает значение смещения отрицательным значением. Указывается логическим значением ("true" или "false").
  • repeat - Удаляет добавляемый класс когда элемент вне области просмотра, делая фукцию повторяемой. Указывается логическим значением ("true" или "false").
  • callbackFunction - Функция запускаемая после добавления класса. Возвращает "add" или "remove", в зависимости от того был ли класс добавлен или удален
  • scrollHorizontal - Установить "true" если сайт имеет горизонтальный скролл, вместо вертикального. Указывается логическим значением ("true" или "false").
Если у Вас возникли вопросы, замечания, предложения или просто благодарность - пишите в комментариях.
Делитесь полезными материалами в социальных сетях.

Комментарии

Добрый день
Спасибо за статью. Только поправьте плиз первую строчку скрипта.
Она должна иметь вид: jQuery(document).ready(function(){ А то ошибки вылазят

Благодарю! Внес правки.

Здравствуйте. Используя этот плагин, столкнулась со следующей проблемой - у меня лендинг, почему-то мой блок, который надо анимировать при прокрутке до него, плагин изначально распознаёт, как полностью видимый. То есть я до него доскроливаю, а к этому моменту анимация уже прошла. Зато когда скролю ниже, все классы снимаются и при повторном скроле вверх до моего блока, анимация уже срабатывает корректно. То есть как-то только при скролле снизу вверх работает. Что это может быть за беда(

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

callbackFunction: function(elem, action){} - есть же в описании.

Ребят, помогите, заранее благодарен! Проблема в том, что этот плагин никак не хочет работать в chrome и opera. Присваивает просто класс hidden и дальше ноль реакции, уже весь вечер сижу.

Добавить комментарий