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> <script>
import Ticker from 'svelte-ticker'; import Ticker from 'svelte-ticker';
import {HsvPicker} from 'svelte-color-picker'; import {HsvPicker} from 'svelte-color-picker';
function colorCallback(rgba) { 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> </script>
<HsvPicker on:colorChange={colorCallback} startColor={"#FF00FF"}/> <div class="main">
<div class="container">
<div> <h1>Scrolltron</h1>
<Ticker pausing=false> </div>
<strong> foooo foooo foooo foooo foooo foooo foooo foooo foooo foooo foooo foooo foooo foooo foooo foooo foooo foooo foooo </strong> <p></p>
<strong> barrrr barrrr barrrr barrrr barrrr barrrr barrrr barrrr barrrr barrrr barrrr barrrr barrrr barrrr barrrr barrrr barrrr barrrr barrrr </strong> <div class="picker">
</Ticker> <HsvPicker on:colorChange={colorCallback} startColor={"#00FF00"}/>
</div>
<Ticker pausing=false> <p></p>
<strong> boooo boooo boooo boooo boooo boooo boooo boooo boooo boooo boooo boooo boooo boooo boooo boooo boooo boooo boooo </strong> <div class="horizontal">
<strong> mooorrr mooorrr mooorrr mooorrr mooorrr mooorrr mooorrr mooorrr mooorrr mooorrr mooorrr mooorrr mooorrr mooorrr mooorrr mooorrr mooorrr mooorrr mooorrr </strong> <Ticker pausing=false duration=60>
</Ticker> 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> </div>
<style> <style>
div {
bottom: 0; h3 {
color: purple; 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-family: Verdana, sans-serif;
font-weight: 600; font-weight: 600;
font-size: 2.75em; font-size: 2.75em;
background: rgba(128, 255, 32, 0.25); background: rgba(128, 128, 128, 0);
} @keyframes horizontal {
#div > :global(*) { display: inline-block!important; }
@keyframes horizontal {
100% { transform: translateX(-50%); } 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> </style>