momentum
momentum copied to clipboard
Published
20 hours ago •
scottkellum
scottkellum
Track movement and basic events with CSS custom properties
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
| Property | Description |
|---|---|
| 0 before the page is loaded, 1 when the page is done loading.
|
| The width of the viewport. |
| The height of the viewport. |
| Distance scrolled on the X axis. |
| Distance scrolled on the Y axis. |
| Pointer coordinates on the X axis. This includes touch events. |
| Pointer coordinates on the Y axis. This includes touch events. |
| Boolean value if the pointer is up or down. Use touchpoints below for touch events. |
| Number of touch points currently active. |
| Gyroscopic orientation along the alpha axis. Only avalible in some mobile browsers. |
| Gyroscopic orientation along the beta axis. Only avalible in some mobile browsers. |
| Gyroscopic orientation along the gamma axis. Only avalible in some mobile browsers. |
| Compass heading. Only avalible in some mobile browsers. |
| A random value between 0 and 1.
|
| 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.
| Property | Description |
|---|---|
| Width of the element |
| Height of the element |
| Element offsetTop value |
| Element offsetLeft value |
| A random value between 0 and 1. This overrides the global value in the CSS cascade.
|
Metadata
19
Stars
1
Forks
Watchers
Owner
scottkellum
Metadata
Track movement and basic events with CSS custom properties