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 'css.medium.js';
const medium = new Medium({
features: {
xy: true,
scroll: true,
time: true,
random: true,
math: true,
},
});
#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)));
}
MIT License
Copyright © Ivan Bogachev, 2023