40 lines
891 B
Svelte
40 lines
891 B
Svelte
<script lang="ts">
|
|
const { href } = $props();
|
|
|
|
let scrollY = $state(0);
|
|
</script>
|
|
|
|
<svelte:window bind:scrollY />
|
|
|
|
<div class="flex items-center gap-x-2 transition-opacity duration-250" class:opacity-0={scrollY > 0}>
|
|
<div class="divider divider-horizontal m-0"></div>
|
|
<a {href} aria-label="scroll to teams">
|
|
<div class="border-accent border-2 rounded-t-full rounded-b-full h-7 w-4 p-1">
|
|
<div class="bg-accent rounded-full h-1 w-1 bounce"></div>
|
|
</div>
|
|
</a>
|
|
<a class="link text-sm" {href}>Zu den Teams</a>
|
|
<div class="divider divider-horizontal m-0"></div>
|
|
</div>
|
|
|
|
<style>
|
|
@keyframes scrollDown {
|
|
0% {
|
|
transform: none;
|
|
opacity: 0.25;
|
|
}
|
|
50% {
|
|
transform: translateY(0%);
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
transform: translateY(250%);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.bounce {
|
|
animation: scrollDown 2s infinite;
|
|
}
|
|
</style>
|