Intersect

Плагин Intersect представляет собой удобную обёртку для Intersection Observer, которая позволяет легко реагировать на попадание элемента в область просмотра.

Это полезно для: отложенной загрузки изображений и другого контента, запуска анимации, бесконечной прокрутки, регистрации «просмотров» контента и т. д.

Установка

Вы можете использовать этот плагин, включив его из тега <script> или установив с помощью менеджера пакетов.

Через CDN

Вы можете подключить CDN-сборку этого плагина с помощью тега <script>, только подключать нужно ДО основного JS-файла Alpine.

jsDelivr CDN
unpkg CDN

<!-- Intersect Plugin -->
<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/intersect@3/dist/cdn.min.js"></script>

<!-- Alpine Core -->
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3/dist/cdn.min.js"></script>

<!-- Intersect Plugin -->
<script defer src="https://unpkg.com/@alpinejs/intersect@latest/dist/cdn.min.js"></script>

<!-- Alpine Core -->
<script defer src="https://unpkg.com/alpinejs@3/dist/cdn.min.js"></script>

Через менеджер пакетов

Вы можете установить Intersect для использования внутри вашей сборки следующим образом:

npm i @alpinejs/intersect

pnpm add @alpinejs/intersect

yarn add @alpinejs/intersect

Затем инициализируйте его в своей сборке:

import Alpine from 'alpinejs';
import intersect from '@alpinejs/intersect';

Alpine.plugin(intersect);
Alpine.start();

Основным API для использования этого плагина является x-intersect. Вы можете добавить x-intersect к любому элементу в компоненте Alpine, и когда этот компонент попадет в область просмотра (будет прокручен), будет выполнено указанное выражение.

Например, в следующем фрагменте shown будет оставаться false до тех пор, пока элемент не будет прокручен в поле зрения. В этот момент выражение будет выполнено, и shown станет true:

<div style="height: 60px; overflow-y: scroll;" x-data x-ref="root">
    <span x-on:click.prevent="$refs.root.scrollTo({ top: $refs.root.scrollHeight, behavior: 'smooth' })">
      Прокрутите вниз 👇
    </span>
    <div style="height: 50vh"></div>
    <div x-data="{ shown: false }" x-intersect="shown = true">
        <div x-show="shown" x-transition.duration.1000ms>
            Я нахожусь в области просмотра!
        </div>
        <div x-show="!shown">&nbsp;</div>
    </div>
</div>

Прокрутите вниз 👇

Я нахожусь в области просмотра!

x-intersect:enter

Суффикс :enter является псевдонимом x-intersect и работает аналогичным образом:

<div x-intersect:enter="shown = true">...</div>

Для наглядности можно использовать суффикс :leave.

x-intersect:leave

Добавление :leave запускает ваше выражение, когда элемент покидает область просмотра:

<div x-intersect:leave="shown = true">...</div>

По умолчанию это означает, что весь элемент не находится в области просмотра. Используйте x-intersect:leave.full, чтобы запустить выражение, когда только часть элемента не находится в области просмотра.

Подробнее о базовом API IntersectionObserver

Модификаторы

.once

Иногда полезно вычислять выражение только в первый раз, когда элемент попадает в область просмотра, а не в последующие разы. Например, при запуске анимации ввода («enter»). В этих случаях для достижения этой цели вы можете добавить модификатор .once к x-intersect.

<div x-intersect.once="shown = true">...</div>

.dwell

Иногда элемент должен оставаться в области видимости некоторое время, прежде чем будет вычислено выражение. Модификатор .dwell по умолчанию ожидает 250 миллисекунд непрерывного нахождения в области пересечения:

<div x-intersect.dwell="viewed = true">...</div>

Добавьте длительность, чтобы настроить время ожидания:

<div x-intersect.half.dwell.500ms="viewed = true">...</div>

Здесь выражение вычисляется только после того, как как минимум половина элемента остаётся видимой в течение 500 миллисекунд. Выход за этот порог или скрытие страницы отменяет ожидающее выполнение. После восстановления порога или возвращения страницы в видимое состояние весь интервал должен пройти заново.

С x-intersect:leave отсчёт длительности, напротив, начинается, когда видимость падает ниже настроенного порога:

<div x-intersect:leave.half.dwell.500ms="viewed = false">...</div>

Объедините .dwell с .once, если выражение должно вычисляться только после первого завершённого интервала:

<div x-intersect.half.dwell.500ms.once="viewed = true">...</div>

.half

Оценивает выражение, когда порог пересечения превышает 0.5.

Применяется для элементов, где важно показать хотя бы часть элемента.

// когда `0,5` элемента находится в области просмотра
<div x-intersect.half="shown = true">...</div>

.full

Оценивает выражение, когда порог пересечения превышает 0.99.

Применяется для элементов, где важно показать весь элемент целиком.

// когда `0,99` элемента находится в области просмотра
<div x-intersect.full="shown = true">...</div>

.threshold

Позволяет управлять свойством threshold базового IntersectionObserver:

Это значение должно находиться в диапазоне «0-100». Значение «0» означает: вызвать пересечение, если ЛЮБАЯ часть элемента попадает в область просмотра (поведение по умолчанию). В то время как значение «100» означает: не вызывать пересечение, если только весь элемент не вошел в область просмотра.

Любое значение между ними представляет собой процент от этих двух крайних значений.

Например, если необходимо вызвать пересечение после того, как половина элемента вошла на страницу, можно использовать .threshold.50:

// когда 50% элемента находится в области просмотра
<div x-intersect.threshold.50="shown = true">...</div>

Если бы требовалось срабатывать только тогда, когда 5% элемента попадает в область просмотра, то можно было бы использовать: .threshold.05, и так далее, и так далее.

.margin

Позволяет управлять свойством rootMargin нижележащего IntersectionObserver. Это позволяет эффективно изменять размер границы области просмотра. Положительные значения расширяют границу за пределы области просмотра, а отрицательные значения сужают её вглубь. Значения работают подобно CSS margin: одно значение для всех сторон; два значения для top/bottom, left/right; или четыре значения для top, right, bottom, left. Вы можете использовать значения px и %, или использовать голое число для получения значения в пикселях.

// Загрузить, когда элемент находится в пределах 200px области просмотра
<div x-intersect.margin.200px="loaded = true">...</div>

// Выгрузить, когда элемент оказывается в пределах 10%
// от верхней границы области просмотра или в
// пределах 25px от трёх других границ
<div x-intersect:leave.margin.10%.25px.25.25px="loaded = false">...</div>

// Пометить как видимый, если элемент находится
// в области просмотра более чем на 100 пикселей.
<div x-intersect.margin.-100px="visible = true">...</div>

.parent

По умолчанию x-intersect отслеживает элемент относительно области просмотра браузера. Модификатор .parent задаёт в качестве root используемого IntersectionObserver родительский элемент, поэтому выражение вычисляется исходя из того, виден ли элемент внутри своего родителя, а не на всей странице.

Это удобно, когда элемент находится внутри прокручиваемого контейнера или когда вас интересует его видимость относительно родителя, а не области просмотра браузера.

// Пометить как отображённый, когда элемент
// прокручивается в область видимости своего родителя
<div x-intersect.parent="shown = true">...</div>

Проверка знаний

Вопрос 1

В каких случаях лучше использовать x-intersect:enter?

Когда элемент покидает область просмотра.

За выход элемента из области просмотра отвечает суффикс :leave.
Без разницы — x-intersect:enter и x-intersect работают одинаково.

Суффикс :enter — это псевдоним x-intersect, он нужен только для наглядности.
Правильных ответов нет

Один из вариантов всё-таки верен: :enter действительно является псевдонимом x-intersect.

Вопрос 2

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

.full

.full вычисляет выражение, когда порог пересечения превышает 0.99, то есть виден весь элемент.
.whole

Модификатора .whole в плагине Intersect нет.
.all

Модификатора .all в плагине Intersect нет — за полную видимость отвечает .full.

Прогресс викторины

0 / 0 вопросов отвечено (0%)

0 верно