parent
551d57a6c9
commit
f218f5c267
|
@ -1,12 +1,13 @@
|
|||
<script lang="ts">
|
||||
import { onMount } from "svelte";
|
||||
|
||||
export let speed = 30;
|
||||
export let speed = 50;
|
||||
|
||||
let root: HTMLDivElement | undefined;
|
||||
let inner: HTMLDivElement | undefined;
|
||||
|
||||
let overflowed = false;
|
||||
let running = false;
|
||||
let shiftWidth = "unset";
|
||||
let animLength = "unset";
|
||||
|
||||
|
@ -24,6 +25,9 @@
|
|||
<div
|
||||
class="marquee"
|
||||
class:overflowed
|
||||
class:running
|
||||
on:mouseenter={() => (running = true)}
|
||||
on:mouseleave={() => (running = false)}
|
||||
style={`--shift-width: ${shiftWidth}; --anim-length: ${animLength}`}
|
||||
bind:this={root}
|
||||
>
|
||||
|
@ -47,9 +51,14 @@
|
|||
:global {
|
||||
.overflowed .inner {
|
||||
animation: marquee var(--anim-length) ease-in-out infinite;
|
||||
animation-play-state: paused;
|
||||
--padding: 0.5em;
|
||||
}
|
||||
|
||||
.overflowed.running .inner {
|
||||
animation-play-state: running;
|
||||
}
|
||||
|
||||
@keyframes marquee {
|
||||
0% {
|
||||
transform: translateX(var(--padding));
|
||||
|
|
Loading…
Reference in New Issue