88 lines
1.9 KiB
Svelte
88 lines
1.9 KiB
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 = 'chyron text here. Mooooo. 1234567890. qwertyuyiop. asdfghjkl. zxcvbnm. chyron text here. Mooooo. 1234567890. qwertyuyiop. asdfghjkl. zxcvbnm.';
|
|
|
|
</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="form">
|
|
<p><input bind:value={chyron_text} placeholder="{chyron_text}">
|
|
</p>
|
|
</div>
|
|
|
|
<div class="horizontal">
|
|
<!-- delay affects text starting point offset-->
|
|
<Ticker pausing=false duration=60 delay=-5>
|
|
{chyron_text}
|
|
</Ticker>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<style>
|
|
h3 {
|
|
padding:0;
|
|
margin:0;
|
|
font-family: sans-serif;
|
|
}
|
|
p {
|
|
margin:30px 5px;
|
|
}
|
|
.horizontal{
|
|
padding:376px;
|
|
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);
|
|
}
|
|
.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>
|