Skip to content
Track movement and basic events with CSS custom properties
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
js
scripts
.eslintrc.json
.gitignore
.prettierrc
index.html
package-lock.json
package.json
readme.md
style.css

readme.md

Momentum

Add page events like tracking scroll position, mouse position, device orientation, and more to your CSS! See an example of momentum in use.

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.
You can’t perform that action at this time.