Inview-CSS-Variables

A script to set css variables and data attributes to a dom element if this is visible in the viewport.

Demo

https://mkoeppen.github.io/inview-css-variables/test/index-cjs.html

Quick start

Download inview-css-variables.min.js

Load script file

<script src="~/static/js/inview-css-variables.min.js"></script>

Via NPM

Install package via NPM

npm install inview-css-variables

Import Script

import InViewCssVariables from "inview-css-variables";

Usage

Add class to DOM elements

<div class="m-inview-css"></div>

Init after document loaded

new InViewCssVariables()

Overwrite default options

new InViewCssVariables({
    baseClass: 'm-inview-css',
    positionTrackClass: 'm-inview-css--track-scroll-position',
    aboveViewportVariable: '--percentage-above-viewport',
    belowViewportVariable: '--percentage-below-viewport',
    inViewportVariable: '--in-view',
})

RESULT:

<div class="m-inview-css" data-is-in-view="true" data-was-in-view="true"></div>

Get position variables

<div class="m-inview-css m-inview-css--track-scroll-position"></div>

RESULT:

<div class="m-inview-css" data-is-in-view="true" data-was-in-view="true" style="--percentage-above-viewport:0; --percentage-below-viewport:0.548833; --in-view:0.225583;"></div>