71 lines
1.6 KiB
Svelte
71 lines
1.6 KiB
Svelte
<script>
|
|
import Ticker from 'svelte-ticker';
|
|
import {HsvPicker} from 'svelte-color-picker';
|
|
|
|
export function colorCallback(rgba) {
|
|
let r = rgba.detail.r;
|
|
let g = rgba.detail.g;
|
|
let b = rgba.detail.b;
|
|
let a = rgba.detail.a;
|
|
|
|
let horizontal = document.querySelector(".horizontal");
|
|
horizontal.style.color = `rgb(${r},${g},${b})`;
|
|
}
|
|
</script>
|
|
|
|
<div class="main">
|
|
<div class="container">
|
|
<h1>Scrolltron</h1>
|
|
</div>
|
|
<p></p>
|
|
<div class="picker">
|
|
<HsvPicker on:colorChange={colorCallback} startColor={"#00FF00"}/>
|
|
</div>
|
|
<p></p>
|
|
<div class="horizontal">
|
|
<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 barrrr barrrr barrrr barrrr barrrr barrrr barrrr barrrr barrrr barrrr barrrr barrrr barrrr barrrr barrrr barrrr barrrr barrrr barrrr
|
|
</Ticker>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<style>
|
|
|
|
h3 {
|
|
padding:0;
|
|
margin:0;
|
|
font-family: sans-serif;
|
|
}
|
|
|
|
p {
|
|
margin:30px 5px;
|
|
}
|
|
.horizontal{
|
|
padding:516px;
|
|
font-family: Verdana, sans-serif;
|
|
font-weight: 600;
|
|
font-size: 2.75em;
|
|
background: rgba(128, 128, 128, 0);
|
|
@keyframes horizontal {
|
|
100% { transform: translateX(-50%); }
|
|
}
|
|
}
|
|
.main {
|
|
}
|
|
.container{
|
|
color: pink;
|
|
font-family: Verdana, sans-serif;
|
|
font-weight: 600;
|
|
font-size: 2.75em;
|
|
background: rgba(128, 128, 128, 0);
|
|
}
|
|
.picker{
|
|
color: rgb(61, 177, 206);
|
|
font-family: Verdana, sans-serif;
|
|
font-weight: 600;
|
|
font-size: 2.75em;
|
|
background: rgba(128, 128, 128, 0);
|
|
}
|
|
</style>
|