scrolltron/src/routes/+page.svelte

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


function ticker_font_color_Callback(ticker_font_color) {
    let r = ticker_font_color.detail.r;
    let g = ticker_font_color.detail.g;
    let b = ticker_font_color.detail.b;
    let a = ticker_font_color.detail.a;
    let horizontal = document.querySelector(".horizontal");
    horizontal.style.color = `rgba(${r},${g},${b},${a})`;
}

function ticker_background_color_Callback(ticker_background_color) {
    let rb = ticker_background_color.detail.r;
    let gb = ticker_background_color.detail.g;
    let bb = ticker_background_color.detail.b;
    let ab = ticker_background_color.detail.a;
    let hz_background = document.querySelector(".horizontal");
    hz_background.style.background = `rgba(${rb},${gb},${bb},${ab})`;
}

/** @type {import('./$types').ActionData} */
export let form;
let ticker_text_01 = 'ticker text here.  Mooooo.';
let ticker_text_02 = '1234567890. qwertyuyiop. asdfghjkl. zxcvbnm. ticker text here.  Mooooo. 555.';
let ticker_text_03 = '1234567890. qwertyuyiop. asdfghjkl. zxcvbnm.';
let ticker_text_04 = '  1234567890. qwertyuyiop. asdfghjkl. zxcvbnm.';

let ticker_font_size = 2.75;
let ticker_font_weight = 600;
let ticker_speed = 30;

</script>

<div class="horizontal">
	<!-- delay affects text starting point offset-->
	<Ticker duration={ticker_speed} delay=0 pausing=false>
		<span
			style="font-size: {ticker_font_size}em;
			font-weight: {ticker_font_weight}
			">
			{ticker_text_01}
			{ticker_text_02}
			{ticker_text_03}
			{ticker_text_04}
		</span>
	</Ticker>
</div>

<div class="main">
	<div class="container">
        <!-- <center><h3>Scrolltron</h3></center> -->
	</div>
	<br>
	<div class="font_color_picker">
		Font Color: <HsvPicker on:colorChange={ticker_font_color_Callback} startColor={"#00FF00"}/>
	</div>
    <p></p>
    <div class="background_color_picker">
		Background Color: <HsvPicker on:colorChange={ticker_background_color_Callback} startColor={"#5500FF"}/>
	</div>
	<div class="form">
		<p>
		<input bind:value={ticker_text_01} placeholder="{ticker_text_01}">
		<input bind:value={ticker_text_02} placeholder="{ticker_text_02}">
		<input bind:value={ticker_text_03} placeholder="{ticker_text_03}">
		<input bind:value={ticker_text_04} placeholder="{ticker_text_04}">
		</p>
		Font Size: <input type=range min="0.5" max="40" bind:value={ticker_font_size}>
		Font Weight: <input type=range min="200" max="600" bind:value={ticker_font_weight}>
		Speed: <input type=range min="5" max="200" bind:value={ticker_speed}>

	</div>
</div>
<p></p>


<style>
	h3 {
		padding:0;
		margin:0;
		font-family: sans-serif;
	}
	p {
		margin:30px 5px;
	}
    .horizontal{
        /* padding:426px;*/
		font-family: Verdana, sans-serif;
		/*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);
	}
		.font_color_picker{
		color: rgb(61, 177, 206);
		font-family: Verdana, sans-serif;
		font-weight: 600;
		font-size: 2.75em;
		background: rgba(128, 128, 128, 0);
	}
		.background_color_picker{
		color: rgb(197, 123, 27);
		font-family: Verdana, sans-serif;
		font-weight: 600;
		font-size: 2.75em;
		background: rgba(128, 128, 128, 0);
	}
</style>