README
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>