71 lines
1.5 KiB
Svelte
71 lines
1.5 KiB
Svelte
<script>
|
|
import Ticker from 'svelte-ticker';
|
|
import {HsvPicker} from 'svelte-color-picker';
|
|
|
|
function colorCallback(rgba) {
|
|
let r = rgba.detail.r;
|
|
let g = rgba.detail.g;
|
|
let b = rgba.detail.b;
|
|
let a = rgba.detail.a;
|
|
}
|
|
</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>
|
|
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;
|
|
color: rgb(113, 131, 33);
|
|
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>
|