banii.cafe/src/lib/components/blinkies.svelte
2025-11-18 03:39:53 +00:00

46 lines
809 B
Svelte
Executable file

<script lang="ts">
const imported = import.meta.glob('$lib/assets/img/blinkies/*.gif', { eager: true });
let blinkies: Array<string> = [];
for (const img in imported) {
blinkies.push(img);
}
</script>
<div class="holder noselect">
<div class="marquee">
{#each blinkies as blinkie}
<img src={blinkie} alt="" />
{/each}
{#each blinkies as blinkie}
<img src={blinkie} alt="" />
{/each}
</div>
</div>
<style>
img {
width: 150px;
height: 20px;
}
.holder {
font-family: none;
width: 800px;
margin: 1em auto;
overflow: hidden;
height: 20px;
}
.marquee {
display: inline-flex;
gap: 5px;
animation: marquee 120s linear infinite;
}
@keyframes marquee {
0% {
transform: translateZ(0);
}
to {
transform: translate3d(-50%, 0, 0);
}
}
</style>