44 lines
1.2 KiB
Svelte
44 lines
1.2 KiB
Svelte
|
|
|
|
<h1>Scrolltron</h1>
|
|
|
|
<script>
|
|
import Ticker from 'svelte-ticker';
|
|
import {HsvPicker} from 'svelte-color-picker';
|
|
|
|
function colorCallback(rgba) {
|
|
console.log(rgba.detail)
|
|
}
|
|
</script>
|
|
|
|
<HsvPicker on:colorChange={colorCallback} startColor={"#FF00FF"}/>
|
|
|
|
<div>
|
|
<Ticker pausing=false>
|
|
<strong> foooo foooo foooo foooo foooo foooo foooo foooo foooo foooo foooo foooo foooo foooo foooo foooo foooo foooo foooo </strong>
|
|
<strong> barrrr barrrr barrrr barrrr barrrr barrrr barrrr barrrr barrrr barrrr barrrr barrrr barrrr barrrr barrrr barrrr barrrr barrrr barrrr </strong>
|
|
</Ticker>
|
|
|
|
<Ticker pausing=false>
|
|
<strong> boooo boooo boooo boooo boooo boooo boooo boooo boooo boooo boooo boooo boooo boooo boooo boooo boooo boooo boooo </strong>
|
|
<strong> mooorrr mooorrr mooorrr mooorrr mooorrr mooorrr mooorrr mooorrr mooorrr mooorrr mooorrr mooorrr mooorrr mooorrr mooorrr mooorrr mooorrr mooorrr mooorrr </strong>
|
|
</Ticker>
|
|
</div>
|
|
|
|
<style>
|
|
div {
|
|
bottom: 0;
|
|
color: purple;
|
|
font-family: Verdana, sans-serif;
|
|
font-weight: 600;
|
|
font-size: 2.75em;
|
|
background: rgba(128, 255, 32, 0.25);
|
|
}
|
|
#div > :global(*) { display: inline-block!important; }
|
|
|
|
|
|
@keyframes horizontal {
|
|
100% { transform: translateX(-50%); }
|
|
}
|
|
</style>
|