https://github.com/scottkellum/momentum
Track movement and basic events with CSS custom properties
https://github.com/scottkellum/momentum
css parallax scrolling touch-events
Last synced: 9 days ago
JSON representation
Track movement and basic events with CSS custom properties
- Host: GitHub
- URL: https://github.com/scottkellum/momentum
- Owner: scottkellum
- License: mit
- Created: 2018-08-04T01:28:48.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2025-02-13T00:06:00.000Z (2 months ago)
- Last Synced: 2025-03-27T08:01:50.111Z (26 days ago)
- Topics: css, parallax, scrolling, touch-events
- Language: JavaScript
- Homepage:
- Size: 54.7 KB
- Stars: 19
- Watchers: 2
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# Momentum
Add page events like tracking scroll position, mouse position, device orientation, and more to your CSS! [See an example of momentum in use](https://momentumcss.netlify.com/).
## Installation
Add [the js](https://raw.githubusercontent.com/scottkellum/momentum/master/js/momentum.min.js) inside your `` 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. Use a --noise-interval of 0 to disable jitter.
### 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.