Track movement and basic events with CSS custom properties
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
momentum-css.js
readme.md
test.css
test.html

readme.md

Momentum

Add page events like tracking scroll position, mouse position, device orientation, and more to your CSS!

Installation

Add the js inside your <head> tag.

Usage

All values are unitless meaning you will need to add your units to them. For example, calc(var(--scrolly)*1px) results in a pixel value for the vertical scroll position.

Global variables

PropertyDescription
--loaded
0 before the page is loaded, 1 when the page is done loading.
--viewportwidth
The width of the viewport.
--viewportheight
The height of the viewport.
--scrollx
Distance scrolled on the X axis.
--scrolly
Distance scrolled on the Y axis.
--clientx
Pointer coordinates on the X axis. This includes touch events.
--clienty
Pointer coordinates on the Y axis. This includes touch events.
--pointerdown
Boolean value if the pointer is up or down. Use touchpoints below for touch events.
--touchpoints
Number of touch points currently active.
--orientationalpha
Gyroscopic orientation along the alpha axis. Only avalible in some mobile browsers.
--orientationbeta
Gyroscopic orientation along the beta axis. Only avalible in some mobile browsers.
--orientationgamma
Gyroscopic orientation along the gamma axis. Only avalible in some mobile browsers.
--compassheading
Compass heading. Only avalible in some mobile browsers.
--random
A random value between 0 and 1.
--noise
A random value between 0 and 1 updated every 100ms unless otherwise specified with --noise-interval on the <body> tag.

Element variables

To trigger element variables, add the class momentumcss to your elemnt.

PropertyDescription
--width
Width of the element
--height
Height of the element
--top
Element offsetTop value
--left
Element offsetLeft value
--random
A random value between 0 and 1. This overrides the global value in the CSS cascade.