deepcrayon
/
scrolltron
1
0
Fork 0
Code Releases Activity

position (meh), color

main
Jeff Moe 2022-12-24 14:56:55 -07:00
parent 3933bf63ae
commit 5e921240ff
1 changed files with 53 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
src/routes/+page.svelte
View File

@ -1,43 +1,70 @@
<h1>Scrolltron</h1>
<script>
import Ticker from 'svelte-ticker';
import {HsvPicker} from 'svelte-color-picker';
function colorCallback(rgba) {
console.log(rgba.detail)
let r = rgba.detail.r;
let g = rgba.detail.g;
let b = rgba.detail.b;
let a = rgba.detail.a;
}
</script>
<HsvPicker on:colorChange={colorCallback} startColor={"#FF00FF"}/>
<div>
<Ticker pausing=false>
<strong> foooo foooo foooo foooo foooo foooo foooo foooo foooo foooo foooo foooo foooo foooo foooo foooo foooo foooo foooo </strong>
<strong> barrrr barrrr barrrr barrrr barrrr barrrr barrrr barrrr barrrr barrrr barrrr barrrr barrrr barrrr barrrr barrrr barrrr barrrr barrrr </strong>
</Ticker>
<Ticker pausing=false>
<strong> boooo boooo boooo boooo boooo boooo boooo boooo boooo boooo boooo boooo boooo boooo boooo boooo boooo boooo boooo </strong>
<strong> mooorrr mooorrr mooorrr mooorrr mooorrr mooorrr mooorrr mooorrr mooorrr mooorrr mooorrr mooorrr mooorrr mooorrr mooorrr mooorrr mooorrr mooorrr mooorrr </strong>
</Ticker>
<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">
<Ticker pausing=false duration=60>
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>
div {
bottom: 0;
color: purple;
h3 {
padding:0;
margin:0;
font-family: sans-serif;
}
p {
margin:30px 5px;
}
.horizontal{
padding:516px;
color: rgb(113, 131, 33);
font-family: Verdana, sans-serif;
font-weight: 600;
font-size: 2.75em;
background: rgba(128, 255, 32, 0.25);
}
#div > :global(*) { display: inline-block!important; }
@keyframes horizontal {
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>