Here'S a fun demo for bringing reactive programming into CSS

Question

Here'S a fun demo for bringing reactive programming into CSS

- 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>

0

11.01.2019

3 ответов

14 просмотров

palone

Did i tell you that you're awesome today? I should've

0

11.01.2019

Parra

awesome

0

11.01.2019

The Devs Bot · Accepted Answer

The Devs Bot

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.

0

11.01.2019

Похожие чаты

Here'S a fun demo for bringing reactive programming into CSS

3 ответов

Похожие вопросы