deepcrayon
/
scrolltron
1
0
Fork 0
Code Releases Activity

scrolltron with moving ticker & color picker draft

main
Jeff Moe 2022-12-24 12:56:45 -07:00
parent def8d4abff
commit 3933bf63ae
3 changed files with 154 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

108
package-lock.json generated
View File

@ -7,6 +7,9 @@
"": {
"name": "scrolltron",
"version": "0.0.1",
"dependencies": {
"svelte-color-picker": "^1.0.7"
},
"devDependencies": {
"@sveltejs/adapter-auto": "^1.0.0",
"@sveltejs/kit": "^1.0.0",
@ -19,6 +22,7 @@
"prettier-plugin-svelte": "^2.8.1",
"svelte": "^3.54.0",
"svelte-check": "^2.9.2",
"svelte-ticker": "^1.0.0",
"tslib": "^2.4.1",
"typescript": "^4.9.3",
"vite": "^4.0.0"
@ -1024,6 +1028,14 @@
"integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
"dev": true
},
"node_modules/console-clear": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/console-clear/-/console-clear-1.1.1.tgz",
"integrity": "sha512-pMD+MVR538ipqkG5JXeOEbKWS5um1H4LUUccUQG68qpeqBYbzYy79Gh55jkd2TtPdRfUaLWdv6LPP//5Zt0aPQ==",
"engines": {
"node": ">=4"
}
},
"node_modules/cookie": {
"version": "0.5.0",
"resolved": "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz",
@ -1545,6 +1557,14 @@
"integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
"dev": true
},
"node_modules/get-port": {
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/get-port/-/get-port-3.2.0.tgz",
"integrity": "sha512-x5UJKlgeUiNT8nyo/AcnwLnZuZNcSjSw0kogRB+Whd1fjjFq4B1hySFxSFWWSn4mIBzg3sRNUDFYc4g5gjPoLg==",
"engines": {
"node": ">=4"
}
},
"node_modules/glob": {
"version": "7.2.3",
"resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
@ -1842,6 +1862,14 @@
"node": ">= 0.8.0"
}
},
"node_modules/local-access": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/local-access/-/local-access-1.1.0.tgz",
"integrity": "sha512-XfegD5pyTAfb+GY6chk283Ox5z8WexG56OvM06RWLpAc/UHozO8X6xAxEkIitZOtsSMM1Yr3DkHgW5W+onLhCw==",
"engines": {
"node": ">=6"
}
},
"node_modules/locate-path": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
@ -1967,7 +1995,6 @@
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz",
"integrity": "sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==",
"dev": true,
"engines": {
"node": ">=4"
}
@ -2353,7 +2380,6 @@
"version": "1.8.1",
"resolved": "https://registry.npmjs.org/sade/-/sade-1.8.1.tgz",
"integrity": "sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==",
"dev": true,
"dependencies": {
"mri": "^1.1.0"
},
@ -2441,6 +2467,62 @@
"node": ">= 10"
}
},
"node_modules/sirv-cli": {
"version": "0.4.6",
"resolved": "https://registry.npmjs.org/sirv-cli/-/sirv-cli-0.4.6.tgz",
"integrity": "sha512-/Vj85/kBvPL+n9ibgX6FicLE8VjidC1BhlX67PYPBfbBAphzR6i0k0HtU5c2arejfU3uzq8l3SYPCwl1x7z6Ww==",
"dependencies": {
"console-clear": "^1.1.0",
"get-port": "^3.2.0",
"kleur": "^3.0.0",
"local-access": "^1.0.1",
"sade": "^1.4.0",
"sirv": "^0.4.6",
"tinydate": "^1.0.0"
},
"bin": {
"sirv": "index.js"
},
"engines": {
"node": ">= 6"
}
},
"node_modules/sirv-cli/node_modules/@polka/url": {
"version": "0.5.0",
"resolved": "https://registry.npmjs.org/@polka/url/-/url-0.5.0.tgz",
"integrity": "sha512-oZLYFEAzUKyi3SKnXvj32ZCEGH6RDnao7COuCVhDydMS9NrCSVXhM79VaKyP5+Zc33m0QXEd2DN3UkU7OsHcfw=="
},
"node_modules/sirv-cli/node_modules/kleur": {
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/kleur/-/kleur-3.0.3.tgz",
"integrity": "sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==",
"engines": {
"node": ">=6"
}
},
"node_modules/sirv-cli/node_modules/mime": {
"version": "2.6.0",
"resolved": "https://registry.npmjs.org/mime/-/mime-2.6.0.tgz",
"integrity": "sha512-USPkMeET31rOMiarsBNIHZKLGgvKc/LrjofAnBlOttf5ajRvqiRA8QsenbcooctK6d6Ts6aqZXBA+XbkKthiQg==",
"bin": {
"mime": "cli.js"
},
"engines": {
"node": ">=4.0.0"
}
},
"node_modules/sirv-cli/node_modules/sirv": {
"version": "0.4.6",
"resolved": "https://registry.npmjs.org/sirv/-/sirv-0.4.6.tgz",
"integrity": "sha512-rYpOXlNbpHiY4nVXxuDf4mXPvKz1reZGap/LkWp9TvcZ84qD/nPBjjH/6GZsgIjVMbOslnY8YYULAyP8jMn1GQ==",
"dependencies": {
"@polka/url": "^0.5.0",
"mime": "^2.3.1"
},
"engines": {
"node": ">= 6"
}
},
"node_modules/slash": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
@ -2581,6 +2663,14 @@
"svelte": "^3.24.0"
}
},
"node_modules/svelte-color-picker": {
"version": "1.0.7",
"resolved": "https://registry.npmjs.org/svelte-color-picker/-/svelte-color-picker-1.0.7.tgz",
"integrity": "sha512-Xu5efoJKPEouO+rSLkbVR/0EI4ewzO2PgtapC7FdvPlYaCykdqm7YvsoTLaTSNdIljoBtHzNaYgtYxc/ThL5+w==",
"dependencies": {
"sirv-cli": "^0.4.4"
}
},
"node_modules/svelte-hmr": {
"version": "0.15.1",
"resolved": "https://registry.npmjs.org/svelte-hmr/-/svelte-hmr-0.15.1.tgz",
@ -2668,6 +2758,12 @@
"sourcemap-codec": "^1.4.8"
}
},
"node_modules/svelte-ticker": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/svelte-ticker/-/svelte-ticker-1.0.0.tgz",
"integrity": "sha512-rjbBd4HsMZj6pWEmpHA3Em704LGc4KIc/ZsA7u+Qmefdt8iIWCsgdnkP7rWefbGI16gw6La8xAIx/DntgXUHGA==",
"dev": true
},
"node_modules/text-table": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
@ -2684,6 +2780,14 @@
"globrex": "^0.1.2"
}
},
"node_modules/tinydate": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/tinydate/-/tinydate-1.3.0.tgz",
"integrity": "sha512-7cR8rLy2QhYHpsBDBVYnnWXm8uRTr38RoZakFSW7Bs7PzfMPNZthuMLkwqZv7MTu8lhQ91cOFYS5a7iFj2oR3w==",
"engines": {
"node": ">=4"
}
},
"node_modules/to-regex-range": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",

6
package.json
View File

@ -23,9 +23,13 @@
"prettier-plugin-svelte": "^2.8.1",
"svelte": "^3.54.0",
"svelte-check": "^2.9.2",
"svelte-ticker": "^1.0.0",
"tslib": "^2.4.1",
"typescript": "^4.9.3",
"vite": "^4.0.0"
},
"type": "module"
"type": "module",
"dependencies": {
"svelte-color-picker": "^1.0.7"
}
}

45
src/routes/+page.svelte
View File

@ -1,2 +1,43 @@
<h1>Welcome to SvelteKit</h1>
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
<h1>Scrolltron</h1>
<script>
import Ticker from 'svelte-ticker';
import {HsvPicker} from 'svelte-color-picker';
function colorCallback(rgba) {
console.log(rgba.detail)
}
</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>
<style>
div {
bottom: 0;
color: purple;
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 {
100% { transform: translateX(-50%); }
}
</style>