Похожие чаты

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 ответов

10 просмотров

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

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

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

Ready for some fun AND a chance to win TKO Tokens? Join us for exciting minigames in our Telegram group! 🕒 Don’t miss out—games start on today 25 October 2024, at 8 PM! Ge...
Milkyway | Tokocrypto
255
Добрый вечер. Есть вопрос, а может и предложение. Был у меня диалог в другой группе о делфи и я задался вопросом: "А нельзя ли в делфи цвет //коментария и {комментария} сде...
Kraszx
24
Всем привет! Подскажи, пожалуйста, как передать в TComboBox сразу значение и id записи. На Delphi я делал так: ComboBox1.Items.AddObject('Какое-то значение', Pointer(id запис...
Евгений
13
Мдя, прикол, боевая сборка запускается (именно под отладчиком) после F9 примерно полторы минуты (97 секунд если быть точным). Начал копать - проблема детектится сразу - зависа...
Александр (Rouse_) Багель
38
How are we going bro about the Raids ??
🅿️abby_FX
13
я так понимаю, я так подозреваю, что создание такого плагина для человека, кто умеет писать плагины для делфи потребует минут 5-10 времени. но это мое подозрение. хотелось бы ...
Kraszx
7
Товарищи, кто работа с iphelper? Или может я в самой логике ошибки фигачу, не пойму.... var ifTable : PMIB_IFTABLE; size, corSize: DWORD; Buffer ...
Warfarellen
4
Здравствуйте, вопрос по структурам данных. Были у вас случаи, когда пришлось писать деревья или двунаправленные списки?
/ /
50
Keep saying it, it’s Trump or WW3. Iran will be emboldened if Harris wins by cheating. Israel will have to take the initiative against Iran. How has BTC faired everytime the...
Adz | Ferrum Network Product & Service Consultant @ Ferrum Network
1
Коллеги, добрый вечер. Создаю коллекцию от TFPGMap, ключ - перечисление, значение - целое. Нужно отсортировать коллекцию по значению. Как это можно сделать?
Kirill Filippenok
11
Карта сайта