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