scrolltron/src/routes/+page.svelte

<script>
import Ticker from 'svelte-ticker';
import {HsvPicker} from 'svelte-color-picker';
import { enhance } from '$app/forms';

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})`;
}

/** @type {import('./$types').ActionData} */
export let form;
let chyron_text_01 = 'chyron text here.  Mooooo.  1234567890. qwertyuyiop. asdfghjkl. zxcvbnm. chyron text here.  Mooooo.  1234567890. qwertyuyiop. asdfghjkl. zxcvbnm.';
let chyron_text_02 = ''
let chyron_text_03 = ''
let chyron_text_04 = ''

</script>

<div class="main">
	<div class="container">
        <h1>Scrolltron</h1>
	</div>
    <p></p>
    <div class="picker">
		<HsvPicker on:colorChange={colorCallback} startColor={"#00FF00"}/>
	</div>
	<div class="form">
		<p>
		<input bind:value={chyron_text_01} placeholder="{chyron_text_01}">
		<input bind:value={chyron_text_02} placeholder="{chyron_text_02}">
		<input bind:value={chyron_text_03} placeholder="{chyron_text_03}">
		<input bind:value={chyron_text_04} placeholder="{chyron_text_04}">
		</p>
	</div>
</div>
<p></p>
<div class="horizontal">
	<!-- delay affects text starting point offset-->
   <Ticker pausing=false duration=60 delay=-10>
	   {chyron_text_01}
	   {chyron_text_02}
	   {chyron_text_03}
	   {chyron_text_04}
   </Ticker>
</div>


<style>
	h3 {
		padding:0;
		margin:0;
		font-family: sans-serif;
	}
	p {
		margin:30px 5px;
	}
    .horizontal{
        padding:424px;
		font-family: Verdana, sans-serif;
		font-weight: 600;
		font-size: 2.75em;
		background: rgba(30, 24, 150, 0.4);
        @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);
	}
	.form{
		color: rgb(156, 102, 30);
		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>