Connect CSS and JS worlds.

This tool adds CSS custom properties with the current mouse position, scroll position, time, random values etc.

npm install css.medium.js

import Medium from 'https://unpkg.com/css.medium.js@1.2.0/css.medium.js';

Import the library and choose features to use:

import Medium from 'css.medium.js';

const medium = new Medium({
    // All features are disabled by default
    features: {
        xy: true,
        scroll: true,
        time: true,
        random: true,
        math: true,
    },
});

Use various values from the JS world through CSS custom properties (see the list of the available properties below):

#scroll-indicator {
    transform: scaleX(var(--js-scroll-y-normalized));
}

#cursor {
    transform:
        translateX(var(--js-mouse-x))
        translateY(var(--js-mouse-y));
}

#target {
    transform:
        perspective(10rem)
        rotateY(calc(1deg * var(--js-mouse-relative-cx-normalized)))
        rotateX(calc(-1deg * var(--js-mouse-relative-cy-normalized)));
}

See live example of how it works:

https://sfi0zy.github.io/medium/

More examples on CodePen:

https://codepen.io/collection/wamGwK

These custom properties will be added to document.body and will be updated if needed:

By default, all coordinates will be calculated from the top left corner of the window and its center. We can mark a few elements with data-medium-target attribute to add relative coordinates to them as well:

<div data-medium-target>...</div>

Targets will get additional local properties for xy feature:

They have almost the same logic as the global CSS custom properties, but we use the size and the position of the target element instead of the window in our calculations.

Also, targets will get additional properties for scroll feature:

Note: since target elements can be smaller than the viewport, the coordinates of the mouse can be outside of them sometimes. Because of that, normalized values for target elements aren't limited to the range from 0 to 1 or from -1 to 1. They are fitted to have values of 0 or 1 on the targets borders with the same logic as the global ones and the window borders. The top and cy values for targets are not limited to the viewport and can be outside of that range as well. We can clamp() all these values in CSS if it's required by design.

To activate more target elements later we can use the update method:

medium.update();

git clone git@github.com:sfi0zy/medium.git
cd medium
make install # install local npm packages
make watch # work with browser-sync (you'll need inotifywatch)
make check # run eslint in console
make clean # delete installed packages if you don't need them anymore

MIT License

Copyright (c) 2023 Ivan Bogachev