- use JS to teach your styles to respond to streams of data by setting a CSS variable. Here we can feed in the window dimensions and cursor position to make the background color of the website change in realtime:
<style>
:root {
--window-width: "innerWidth";
--window-height: "innerHeight";
--cursor-x: "clientX";
--cursor-y: "clientY";
background: hsl(
/* cursor from left-to-right edge goes between 0<->360 */
calc((var(--cursor-x) / var(--window-width)) * 360),
/* cursor from bottom-to-top goes between 0<->100% */
calc(100% - (var(--cursor-y) / var(--window-height) * 100%)),
calc(100% - (var(--cursor-y) / var(--window-height) * 100%))
);
}
</style>
<script type=module>
import computedVariables from 'https://unpkg.com/computed-variables/index.es.js'
// set --cursor- variables to cursor position
computedVariables(
'--cursor-',
(value, event) => event.touches ? e.touches[0][value] : event[value],
window,
['mousemove', 'touchmove']
)
// set --window- variables to window properties
computedVariables(
'--window-',
value => window[value]
)
</script>
It looks like you posted long piece of code, consider editing it out and putting it on hastebin.com and pasting link to it instead. Alternatively, send your code in a file.
Did i tell you that you're awesome today? I should've
awesome
Обсуждают сегодня