Update color of text realtime. Commit with codium.
parent
5e921240ff
commit
c03770a4f1
|
@ -2,11 +2,14 @@
|
||||||
import Ticker from 'svelte-ticker';
|
import Ticker from 'svelte-ticker';
|
||||||
import {HsvPicker} from 'svelte-color-picker';
|
import {HsvPicker} from 'svelte-color-picker';
|
||||||
|
|
||||||
function colorCallback(rgba) {
|
export function colorCallback(rgba) {
|
||||||
let r = rgba.detail.r;
|
let r = rgba.detail.r;
|
||||||
let g = rgba.detail.g;
|
let g = rgba.detail.g;
|
||||||
let b = rgba.detail.b;
|
let b = rgba.detail.b;
|
||||||
let a = rgba.detail.a;
|
let a = rgba.detail.a;
|
||||||
|
|
||||||
|
let horizontal = document.querySelector(".horizontal");
|
||||||
|
horizontal.style.color = `rgb(${r},${g},${b})`;
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
@ -20,15 +23,13 @@ function colorCallback(rgba) {
|
||||||
</div>
|
</div>
|
||||||
<p></p>
|
<p></p>
|
||||||
<div class="horizontal">
|
<div class="horizontal">
|
||||||
<Ticker pausing=false duration=60>
|
<Ticker pausing=false duration=60 delay=-3>
|
||||||
foooo foooo foooo foooo foooo foooo foooo foooo foooo foooo foooo foooo foooo foooo foooo foooo foooo foooo foooo
|
foooo foooo foooo foooo foooo foooo foooo foooo foooo foooo foooo foooo foooo foooo foooo foooo foooo foooo foooo barrrr barrrr barrrr barrrr barrrr barrrr barrrr barrrr barrrr barrrr barrrr barrrr barrrr barrrr barrrr barrrr barrrr barrrr barrrr
|
||||||
barrrr barrrr barrrr barrrr barrrr barrrr barrrr barrrr barrrr barrrr barrrr barrrr barrrr barrrr barrrr barrrr barrrr barrrr barrrr
|
|
||||||
</Ticker>
|
</Ticker>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
|
||||||
h3 {
|
h3 {
|
||||||
|
@ -42,7 +43,6 @@ function colorCallback(rgba) {
|
||||||
}
|
}
|
||||||
.horizontal{
|
.horizontal{
|
||||||
padding:516px;
|
padding:516px;
|
||||||
color: rgb(113, 131, 33);
|
|
||||||
font-family: Verdana, sans-serif;
|
font-family: Verdana, sans-serif;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
font-size: 2.75em;
|
font-size: 2.75em;
|
||||||
|
|
Loading…
Reference in New Issue