deepcrayon
/
scrolltron
1
0
Fork 0
Code Releases Activity

Sort of resize/reweight font with sliders

main
Jeff Moe 2022-12-25 16:24:51 -07:00
parent abde58c0f9
commit be6fe16adf
1 changed files with 17 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/routes/+page.svelte
View File

@ -20,6 +20,9 @@ let chyron_text_02 = ''
let chyron_text_03 = ''
let chyron_text_04 = ''
export let chyron_font_size = 2.75;
export let chyron_font_weight = 600;
</script>
<div class="main">
@ -37,17 +40,25 @@ let chyron_text_04 = ''
<input bind:value={chyron_text_03} placeholder="{chyron_text_03}">
<input bind:value={chyron_text_04} placeholder="{chyron_text_04}">
</p>
<input type=range bind:value={chyron_font_size}>
<input type=range bind:value={chyron_font_weight}>
</div>
</div>
<p></p>
<div class="horizontal">
<!-- delay affects text starting point offset-->
<Ticker pausing=false duration=60 delay=-10>
{chyron_text_01}
{chyron_text_02}
{chyron_text_03}
{chyron_text_04}
</Ticker>
<span
style="font-size: {chyron_font_size}em;
font-weight: {chyron_font_weight}
">
{chyron_text_01}
{chyron_text_02}
{chyron_text_03}
{chyron_text_04}
</span>
</Ticker>
</div>
@ -61,10 +72,8 @@ let chyron_text_04 = ''
margin:30px 5px;
}
.horizontal{
padding:424px;
/* padding:426px;*/
font-family: Verdana, sans-serif;
font-weight: 600;
font-size: 2.75em;
background: rgba(30, 24, 150, 0.4);
@keyframes horizontal {
100% { transform: translateX(-50%); }