Backwards-Remote/backwards.dev
1
0
Fork 0
forked from Backwards/backwards.dev
Code Pull Requests 1 Activity

Updated slide animation

Browse Source
This commit is contained in:
BackwardsUser 2025-01-11 08:48:42 -05:00
parent c8b434efbd
commit 10a28c9df0
1 changed files with 35 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
src/lib/components/Header.svelte
View File

@ -1,9 +1,9 @@
<script> <script>
import Hero from '$lib/components/Hero.svelte'; import Hero from "$lib/components/Hero.svelte";
import { LightSwitch } from '@skeletonlabs/skeleton'; import { LightSwitch } from "@skeletonlabs/skeleton";
import ArrowDown from '~icons/material-symbols/keyboard-double-arrow-down-rounded'; import ArrowDown from "~icons/material-symbols/keyboard-double-arrow-down-rounded";
import { crossfade, fade, fly } from 'svelte/transition'; import { crossfade, fade, fly } from "svelte/transition";
import { onMount } from 'svelte'; import { onMount } from "svelte";
let isAtTop = true; let isAtTop = true;
@ -11,22 +11,40 @@
const handleScroll = () => { const handleScroll = () => {
isAtTop = window.scrollY === 0; isAtTop = window.scrollY === 0;
}; };
window.addEventListener("scroll", handleScroll);
window.addEventListener('scroll', handleScroll); return () => window.removeEventListener("scroll", handleScroll);
return () => window.removeEventListener('scroll', handleScroll);
}); });
</script> </script>
<header class="align-center flex h-screen flex-col justify-between p-4 hero"> <!-- 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="align-center flex h-screen flex-col justify-between p-4 hero scroll-snap-start">
<div class=""></div> <div class=""></div>
<Hero></Hero> <Hero></Hero>
<div <div
class="transition-all duration-300 text-xl self-center ease-in-out relative" class="transition-all duration-300 text-xl self-center ease-in-out relative slide h-6"
style="transform: translateX({isAtTop ? '0px' : '-200px'})"
class:opacity-0={!isAtTop} class:opacity-0={!isAtTop}
> >
<div class="animate-bounce"> {#if isAtTop}
<div
class="animate-bounce"
in:fly={{ x: 200, duration: 300 }}
out:fly={{ x: -200, duration: 300 }}
>
<ArrowDown></ArrowDown> <ArrowDown></ArrowDown>
</div> </div>
{/if}
</div> </div>
</header> </header>
<!-- Your next section -->
<section class="h-screen scroll-snap-start">
<!-- Content -->
</section>