В этой статье рассмотрим замечательный плагин который позволяет определить любой элемент или блок на странице в зоне видимости экрана браузера, имя ему appear.js

Данный плагин вызывает любое ваше событие или действие когда нужный элемент появляется в области видимости экрана, в основном при скролле страницы.

Рассмотрим парочку примеров:

1
2
3
4
5
6
7
8
9
10
// Инициализируем плагин
$('.class').appear();
// Когда класс class появляется в области видимости экрана срабатывает нужный нам код.
$('.class').on('appear', function(event, $all_appeared_elements) {
      // тут выполнится код когда появится элемент в область видимости
});
// Когда класс class исчезнет из области видимости экрана опять же сработает нужный нам код.
$('.class').on('disappear', function(event, $all_disappeared_elements) {
      // тут выполнится код когда элемент исчезнет из области видимости
});

Так же в плагине имеются полезные атрибуты для тега: data-appear-top-offset и data-appear-left-offset.

1
2
3
4
5
// Плагин сработает увидит этот элемент за 600 пикселев заранее чем он находится в действительности, если указать -600 то соответственно на 600 пикселев ниже(элемент будет видно, но плагин пока не сработает)
<div class="postloader" data-appear-top-offset="600">...</div>
// Работает аналогично как и с data-appear-top-offset
<div class="postloader" data-appear-left-offset="600">...</div>
<p>

Иногда бывает что нам нужно проверить какой-либо элемент на странице, есть ли он в зоне видимости или нет и к нам на помощь приходит функция force_appear()

1
2
3
4
$('#somebtn').on('click', function() {
     // функция force_appear() определяет элементы которые уже находятся в видимой части экрана
     $.force_appear();
});

Так же этот плагин предоставляет пользовательский фильтр проверки элементов:

1
$('.class').is(':appeared')

Друзья, теперь вы можете читать и комментировать мои записи и на Я.ру — djDell!

Возможно вас это заинтересует
comments powered by HyperComments