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