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

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

@ -1,32 +1,50 @@
<script>
import Hero from '$lib/components/Hero.svelte';
import { LightSwitch } from '@skeletonlabs/skeleton';
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;
import Hero from "$lib/components/Hero.svelte";
import { LightSwitch } from "@skeletonlabs/skeleton";
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);
window.addEventListener("scroll", handleScroll);
return () => window.removeEventListener("scroll", handleScroll);
});
</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>
<Hero></Hero>
<div
class="transition-all duration-300 text-xl self-center ease-in-out relative"
style="transform: translateX({isAtTop ? '0px' : '-200px'})"
class="transition-all duration-300 text-xl self-center ease-in-out relative slide h-6"
class:opacity-0={!isAtTop}
>
<div class="animate-bounce">
<ArrowDown></ArrowDown>
</div>
{#if isAtTop}
<div
class="animate-bounce"
in:fly={{ x: 200, duration: 300 }}
out:fly={{ x: -200, duration: 300 }}
>
<ArrowDown></ArrowDown>
</div>
{/if}
</div>
</header>
<!-- Your next section -->
<section class="h-screen scroll-snap-start">
<!-- Content -->
</section>