Content visibility component

Watches content marked up with certain classes using Intersection Observers, and applies classes and triggers events when they enter or leave the view area.

Definition

id: content_visibility
title: 'Content visibility'
description: 'Watches content marked up with certain classes using Intersection Observers, and applies classes and triggers events when they enter or leave the view area.'
class: Drupal\ambientimpact_ux\Plugin\AmbientImpact\Component\ContentVisibility
provider: ambientimpact_ux

Configuration

baseClass: content-visibility-observe
observeOnceClass: content-visibility-observe--once
observingClass: content-visibility-observe--observing
visibleClass: content-visibility-observe--visible
defaultThreshold: 0.6
thresholdDataName: content-visibility-threshold

Libraries

component.content_visibility:
  js:
    components/content_visibility/content_visibility.js:
      attributes:
        defer: true
  dependencies:
    - ambientimpact_core/component.fastdom
    - ambientimpact_core/framework