65 lines
No EOL
1.7 KiB
Svelte
65 lines
No EOL
1.7 KiB
Svelte
<script lang="ts">
|
|
import ZSpacer from "./Universal/ZSpacer.svelte";
|
|
|
|
// Hyperparams
|
|
let startExit = 4700;
|
|
let exitLength = 2000;
|
|
let exitScreenLength = 700;
|
|
|
|
// Define, don't touch
|
|
let scrollPos: number = 0;
|
|
let extraPosY = 0;
|
|
let rotation = 0;
|
|
|
|
$:{
|
|
let time = (scrollPos - startExit) / exitLength;
|
|
extraPosY = lerp(0, -exitScreenLength, time, true);
|
|
rotation = lerp(0, 50, time, true);
|
|
}
|
|
|
|
function lerp(from: number, to: number, time: number, clamped: boolean = false) : number {
|
|
const lerped: number = from + (to - from) * time;
|
|
|
|
if (clamped) {
|
|
return from < to ? clamp(lerped, from, to) : clamp(lerped, to, from);
|
|
}
|
|
|
|
return lerped;
|
|
}
|
|
|
|
function clamp(value: number, min: number, max: number): number {
|
|
return Math.min(Math.max(value, min), max);
|
|
}
|
|
</script>
|
|
|
|
<svelte:window bind:scrollY={scrollPos} />
|
|
|
|
<div class="horizontal">
|
|
<div id="WeAreHolder" style="margin-right: 45vw;">
|
|
<div style="transform: translate(0, {extraPosY}px) rotateX({rotation}deg);">
|
|
<div class="no-wrap no-interact big-text align-center"
|
|
style="padding: -10px 10px 0px 10px;">
|
|
We are
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<ZSpacer/>
|
|
</div>
|
|
|
|
<style>
|
|
#WeAreHolder {
|
|
transition: transform 1s cubic-bezier(0,1.32,0,.92);
|
|
transform-style: preserve-3d;
|
|
|
|
perspective: 1000px;
|
|
-moz-perspective: 1000px;
|
|
}
|
|
|
|
#WeAreHolder div>div {
|
|
padding: 0px 30px -5px 30px;
|
|
/* border-radius: 40px; */
|
|
/* background: rgba(57, 57, 57, 0.201); */
|
|
/* border-bottom: 5px solid rgb(189, 189, 189); */
|
|
|
|
}
|
|
</style> |