81 lines
2.2 KiB
Svelte
81 lines
2.2 KiB
Svelte
<script lang="ts">
|
|
import WeAreText from './lib/WeAreText.svelte'
|
|
import { Parallax, ParallaxLayer, StickyLayer } from 'svelte-parallax';
|
|
import { onMount } from "svelte";
|
|
import ZSpacer from './lib/Universal/ZSpacer.svelte';
|
|
import planeImg from './images/PlaneGrid.png';
|
|
|
|
window.onload = function() {
|
|
//window.scrollTo(0, 100);
|
|
window.scrollTo(0, 5500); // Debug
|
|
}
|
|
|
|
// Auto assigned fields (Will change after load)
|
|
let scrollPos: number = -1;
|
|
let parallaxProgress: number = -1;
|
|
|
|
const handleProgress = (progress) => {
|
|
parallaxProgress = progress;
|
|
};
|
|
|
|
function debugClick(){
|
|
}
|
|
|
|
let weAreTexts: string[] = ['overlooked', 'underfunded', 'constrained', 'depleated'];
|
|
</script>
|
|
|
|
<svelte:window bind:scrollY={scrollPos} />
|
|
|
|
<main>
|
|
<div class="topnav">
|
|
<a class="active" href="#home">Home</a>
|
|
<a href="#news">News</a>
|
|
<a href="#contact">Contact</a>
|
|
<a href="#about">About</a>
|
|
</div>
|
|
|
|
<Parallax
|
|
onProgress={handleProgress}
|
|
sections={10}
|
|
config={{stiffness: 0.2, damping: 0.3}}
|
|
>
|
|
<ParallaxLayer rate={0} span={10} style="background: url('{planeImg}'); filter: brightness(10%);" />
|
|
|
|
<StickyLayer offset={{ top: 0, bottom: 10 }} style="z-index: 1000;">
|
|
<div>
|
|
{scrollPos}
|
|
</div>
|
|
<button on:click={debugClick}>Debug button</button>
|
|
</StickyLayer>
|
|
|
|
{#each weAreTexts as text, i}
|
|
{@const stickyOffset = 0.65}
|
|
{@const stickyInterval = 1}
|
|
{@const stickyDuration = 0.5}
|
|
|
|
<StickyLayer class="align-center" rate={-1} offset={{ top: stickyInterval * i + stickyOffset, bottom: stickyInterval * i + stickyDuration + stickyOffset}}>
|
|
<div class="stickyText" style="margin-top: 1vw;">
|
|
{text}
|
|
</div>
|
|
</StickyLayer>
|
|
{/each}
|
|
|
|
<StickyLayer offset={{ top: 5.5, bottom: 5.5 }} style="background-color: #242424;">
|
|
<div class="align-center stickyText" style="font-size: 9vw; padding-top: 200px;">
|
|
The deprived devs
|
|
</div>
|
|
</StickyLayer>
|
|
|
|
<StickyLayer class="align-center" offset={{ top: 0, bottom: 5.125 }} let:progress>
|
|
<WeAreText containerProgress={progress}/>
|
|
</StickyLayer>
|
|
</Parallax>
|
|
</main>
|
|
|
|
<style>
|
|
.stickyText {
|
|
font-family: CozetteVector;
|
|
font-size: 5vw;
|
|
}
|
|
</style>
|
|
|