Mediumv1.2.0

Connect CSS and JS worlds.

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

NPM

npm install css.medium.js

Basic usage

JS:

import Medium from 'css.medium.js';

const medium = new Medium({
    features: {
        xy: true,
        scroll: true,
        time: true,
        random: true,
        math: true,
    },
});

CSS:

#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)));
}

Live example

#target

More examples

https://codepen.io/collection/wamGwK

GitHub + README

https://github.com/sfi0zy/medium

License

MIT License

Copyright © Ivan Bogachev, 2023

void