<script lang="ts"> import { routes } from "./sitemap.ts" import { Separator } from "$lib/components/ui/separator/index.js"; let scrollPosition: number = .5; let scrollHeight: number = 1; let progress: number = 0; function onScroll(p) { if (scrollHeight > 1) { progress = Math.min(1, scrollPosition / scrollHeight); } } </script> <div id="background" style="opacity: {1 - progress}" > </div> <div id="front"> <div id="floater"> <p class="floater-elem" style="color: #888">This is a very long description</p> <div class="floater-elem" style="padding-bottom: {(1 - progress) * 50}vh" > <div class="flex h-5 items-center space-x-4 text-sm"> <a href="#bio">Bio</a> {#each routes as item} {#if item.route !== "/"} <Separator orientation="vertical" /> <a href={item.route}>{item.name}</a> {/if} {/each} </div> </div> </div> </div> <div id="bio" class="bg-white dark:bg-gray-900" style=""> <h1>Home Page</h1> <p>This is the home page. You have scrolled {scrollPosition} / {scrollHeight}, progress: {progress}</p> </div> <svelte:window bind:scrollY={scrollPosition} bind:innerHeight={scrollHeight} on:scroll={onScroll} /> <style> #background { background-image: url('/favicon.svg'); background-attachment: fixed; background-size: 100%; background-position: center; z-index: -10; position: absolute; min-width: 100vw; min-height: 100vh; } #bio { width: 100vw; min-height: 100vh; } #front { height: 100vh; display: flex; flex-direction: column; } #floater { display: flex; flex-direction: column; justify-content: center; margin-top: auto; margin-left: auto; margin-right: auto; } .floater-elem { margin-left: auto; margin-right: auto; } </style>