forked from Backwards/backwards.dev
44 lines
1.2 KiB
Svelte
44 lines
1.2 KiB
Svelte
<script>
|
|
import Hero from "$lib/components/Hero.svelte";
|
|
import ArrowDown from "~icons/material-symbols/keyboard-double-arrow-down-rounded";
|
|
import { crossfade, fade, fly } from "svelte/transition";
|
|
import { onMount } from "svelte";
|
|
|
|
let isAtTop = true;
|
|
|
|
onMount(() => {
|
|
const handleScroll = () => {
|
|
isAtTop = window.scrollY === 0;
|
|
};
|
|
window.addEventListener("scroll", handleScroll);
|
|
return () => window.removeEventListener("scroll", handleScroll);
|
|
});
|
|
</script>
|
|
|
|
<!-- Add these classes to your root container (likely in app.html or layout.svelte) -->
|
|
<style>
|
|
:global(html) {
|
|
scroll-snap-type: y mandatory;
|
|
scroll-behavior: smooth;
|
|
}
|
|
</style>
|
|
|
|
<!-- Add scroll-snap-align to your sections -->
|
|
<header class="fancy-background align-center flex h-screen flex-col justify-between p-4 hero scroll-snap-start">
|
|
<div class=""></div>
|
|
<Hero></Hero>
|
|
<div
|
|
class="transition-all duration-300 text-xl self-center ease-in-out relative slide h-6"
|
|
class:opacity-0={!isAtTop}
|
|
>
|
|
{#if isAtTop}
|
|
<div
|
|
class="animate-bounce"
|
|
in:fly={{ x: 200, duration: 300 }}
|
|
out:fly={{ x: -200, duration: 300 }}
|
|
>
|
|
<ArrowDown></ArrowDown>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
</header> |