scrolltron/src/routes/+page.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;

    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">
         <!-- delay affects text starting point offset-->
        <Ticker pausing=false duration=60 delay=-5>
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>