Element Scroll Position Exposed via CSS Variables

Scrollery is a CSS reprocessor that makes the following JS values available as CSS variables for any element you tell the plugin to watch:

To have scrollery watch an element, you need to give that element a unique identifier, as well as add the data-scrollery attribute. The plugin will use either the value of the data-scrollery attribute, or else the value of the id (if defined) for an element.

By default, Scrollery will watch 0 elements. If you add a data-scrollery attribute to either the <html> or <body> element it will attach an event listener for the scroll event on the window, otherwise if you add the data-scrollery attribute to other elements it will add a scroll listener to that element.

To run Scrollery whenever you want, use the scrollery.load() function in JS.

<div id=example data-scrollery></div>

And the following example are both equivalent, and resolve to a name of example:

<div data-scrollery=example></div>

Once the plugin is aware of an element to watch, and the unique name of that element, it will make the above values available in the following format: --name-value, for example:

Techniques Capable