Похожие чаты

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>

3 ответов

12 просмотров

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

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

Обсуждают сегодня

30500 за редактор? )
Владимир
47
а через ESC-код ?
Alexey Kulakov
29
Anyone knows where there are some instructions or discort about failed bridge transactions ?
Jochem
21
Чёт не понял, я ж правильной функцией воспользовался чтобы вывести отладочную информацию? но что-то она не ловится
notme
18
Привет)) уже кажется эту тему перемусолили, но вот я так и не понял. Я сейчас сижу на 27дюймов 2к мониторе. На Актуальной макоси, если я куплю 27д 4к монитор: - будет ли изобр...
Vladislav Piskunov
16
Also, why can’t the community have a vote/ say when it comes to initiatives like buybacks. Isn’t the point of crypto decentralisation? Don’t we deserve input as long term supp...
👨🏽‍🦰
13
any reference of this implementation?
BitBuddha
29
Страшнейшая правда про списки ЦБ. С первых дней жизни P2P сферы, молодые человеки, начитавшись законодательной базы и "внутренних" документов, решили, что им противостоит сер...
Foxcool
3
У меня есть функция где происходит это: write_bit(buffer, 1); write_bit(buffer, 0); write_bit(buffer, 1); write_bit(buffer, 1); write_bit(buffer, 1); w...
~
14
Hi guys, any problem with Pulsebrige? Trying to transfer from wETH to ETH. First it tells me to connect my metamask "through mobile app" not desktop. Then I did and confirmed ...
Snowflakecrypto
13
Карта сайта