89 lines
2.1 KiB
Svelte
89 lines
2.1 KiB
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})`;
|
|
}
|
|
export let chyrontext='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">
|
|
<form method="POST">
|
|
<label>
|
|
<p>Text</p>
|
|
<input name="chyrontext" type="text">
|
|
</label>
|
|
<button>Update</button>
|
|
</form>
|
|
</div>
|
|
<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 -->
|
|
{chyrontext}
|
|
</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>
|