126 lines
3.8 KiB
Svelte
126 lines
3.8 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 './assets/images/PlaneGrid.png';
|
|
import imgBackground from './assets/images/CubeSideTransparent.png';
|
|
import deprivedTeam from './assets/images/DeprivedTeam.jpg';
|
|
import location from './assets/images/thisLocation.png';
|
|
import photo from './assets/images/realistic.png';
|
|
|
|
window.onload = function() {
|
|
//window.scrollTo(0, 100);
|
|
window.scrollTo(0, 5800); // 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', 'depleted'];
|
|
</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={7.000000001}
|
|
config={{stiffness: 0.2, damping: 0.3}}
|
|
>
|
|
<ParallaxLayer rate={0} span={7.000000001} style="background: url('{planeImg}'); filter: brightness(10%);" />
|
|
|
|
<ParallaxLayer rate={1} span={2}>
|
|
<div style="background: url('{imgBackground}'); filter: brightness(100%); z-index: 1; height: 10%;">
|
|
|
|
</div>
|
|
</ParallaxLayer>
|
|
|
|
<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: 6, bottom: 6 }} style="background-color: #242424; margin-bottom: 20vw;">
|
|
<div class="align-center stickyText" style="font-size: 9vw; padding-top: 200px;">
|
|
The deprived devs
|
|
</div>
|
|
|
|
<div class="align-center">
|
|
<img src="{deprivedTeam}" alt="The deprived team" style=" width: 50%; height: 50%; border-radius: 2vw;"/>
|
|
</div>
|
|
</StickyLayer>
|
|
|
|
<StickyLayer class="align-center" offset={{ top: 0, bottom: 5.6 }} let:progress>
|
|
<WeAreText containerProgress={progress}/>
|
|
</StickyLayer>
|
|
</Parallax>
|
|
|
|
<div class="align-center" style="font-size: 3vw; height: 50vh;">
|
|
Timeline!
|
|
This website is not at all finished. Come back later or contact us at: alex@deprived.dev
|
|
</div>
|
|
|
|
<!-- <div >
|
|
<div class="align-center">
|
|
<img src="{location}" alt="a funny place" style=" width: 50%; height: 50%; border-radius: 2vw;"/>
|
|
</div>
|
|
<div class="align-center" style="padding-top: 2.5vw;">
|
|
<img src="{photo}" alt="a funny place" style=" width: 50%; height: 50%; border-radius: 2vw;"/>
|
|
</div>
|
|
</div> -->
|
|
|
|
<!-- <div class="align-center" style="width: 100%;">
|
|
<div style="justify-items: center; display: flex">
|
|
{#each {length: 10} as _, i}
|
|
<div style="justify-items: start; display: flex;">
|
|
<div class="align-center">
|
|
THE TEAM!!!
|
|
</div>
|
|
<img src="{deprivedTeam}" alt="The deprived team" style=" width: 50%; height: 50%; border-radius: 2vw;"/>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
</div> -->
|
|
</main>
|
|
|
|
<style>
|
|
.stickyText {
|
|
font-family: CozetteVector;
|
|
font-size: 5vw;
|
|
}
|
|
|
|
div {
|
|
font-family: CozetteVector;
|
|
}
|
|
</style>
|
|
|