Cleanup to near minimum
This commit is contained in:
parent
996c5e71b5
commit
6831542447
|
|
@ -1,51 +1,22 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import svelteLogo from './assets/svelte.svg'
|
import WeAreText from './lib/WeAreText.svelte'
|
||||||
import StartVideo from './assets/StartVideo.gif'
|
|
||||||
import ScrollTextComponent from './lib/ScrollTextComponent.svelte'
|
|
||||||
import { Parallax, ParallaxLayer, StickyLayer } from 'svelte-parallax';
|
import { Parallax, ParallaxLayer, StickyLayer } from 'svelte-parallax';
|
||||||
import ZSpacer from './lib/Universal/ZSpacer.svelte';
|
|
||||||
import Cube3D from './lib/Cube3D.svelte';
|
|
||||||
import WeAreText from './lib/WeAreText.svelte';
|
|
||||||
import Cube3DCosmetic from './lib/Cube3DCosmetic.svelte';
|
|
||||||
import { onMount } from "svelte";
|
import { onMount } from "svelte";
|
||||||
|
|
||||||
window.onload = function() {
|
window.onload = function() {
|
||||||
window.scrollTo(0, 100); // Real
|
window.scrollTo(0, 100);
|
||||||
//window.scrollTo(0, 3000); // debug
|
|
||||||
};
|
|
||||||
|
|
||||||
function randomInt(min, max) { // min and max included
|
|
||||||
return Math.floor(Math.random() * (max - min + 1) + min)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function progressToSection(prog: number): number{
|
// Auto assigned fields (Will change after load)
|
||||||
return sections * prog
|
let scrollPos: number = -1;
|
||||||
}
|
let parallaxProgress: number = -1;
|
||||||
|
|
||||||
// Fields
|
|
||||||
let scrollPos: number = 0;
|
|
||||||
let parallaxProgress: number = 0;
|
|
||||||
let cosCubesPositions: number[] = [];
|
|
||||||
|
|
||||||
const handleProgress = (progress) => {
|
const handleProgress = (progress) => {
|
||||||
parallaxProgress = progress;
|
parallaxProgress = progress;
|
||||||
//console.log(progress);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
// Hyperparams
|
|
||||||
let sections: number = 10;
|
|
||||||
let cosmeticCubesSpawnRange: number[] = [0.0049253257070225615, 0.4404724075839424]; // Range relative to parallax progress
|
|
||||||
let numCosCubes: number = 10;
|
|
||||||
|
|
||||||
|
|
||||||
//Spawns the cosCubes
|
|
||||||
for (let i = 0; i < numCosCubes; i++) {
|
|
||||||
cosCubesPositions.push(randomInt(progressToSection(cosmeticCubesSpawnRange[0]),(progressToSection(cosmeticCubesSpawnRange[1]))));
|
|
||||||
}
|
|
||||||
|
|
||||||
function debugClick(){
|
function debugClick(){
|
||||||
console.log(progressToSection(cosmeticCubesSpawnRange[0]));
|
|
||||||
console.log(progressToSection(cosmeticCubesSpawnRange[1]));
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
@ -61,10 +32,10 @@
|
||||||
|
|
||||||
<Parallax
|
<Parallax
|
||||||
onProgress={handleProgress}
|
onProgress={handleProgress}
|
||||||
bind:sections
|
sections={10}
|
||||||
config={{stiffness: 0.2, damping: 0.3}}
|
config={{stiffness: 0.2, damping: 0.3}}
|
||||||
>
|
>
|
||||||
<ParallaxLayer rate={0} span={3} style="background-color: #242424;" />
|
<ParallaxLayer rate={0} span={3} style="background-color: grey;" />
|
||||||
|
|
||||||
<StickyLayer offset={{ top: 0, bottom: 10 }}>
|
<StickyLayer offset={{ top: 0, bottom: 10 }}>
|
||||||
<div>
|
<div>
|
||||||
|
|
@ -73,13 +44,6 @@
|
||||||
<button on:click={debugClick}>Debug button</button>
|
<button on:click={debugClick}>Debug button</button>
|
||||||
</StickyLayer>
|
</StickyLayer>
|
||||||
|
|
||||||
<StickyLayer class="align-center" offset={{ top: 1, bottom: 6.5 }}>
|
|
||||||
<div class="horizontal" style="padding: 200px;">
|
|
||||||
<ZSpacer/>
|
|
||||||
<Cube3D/>
|
|
||||||
</div>
|
|
||||||
</StickyLayer>
|
|
||||||
|
|
||||||
<StickyLayer class="align-center no-interact" offset={{ top: 0, bottom: 6.5 }}>
|
<StickyLayer class="align-center no-interact" offset={{ top: 0, bottom: 6.5 }}>
|
||||||
<WeAreText/>
|
<WeAreText/>
|
||||||
</StickyLayer>
|
</StickyLayer>
|
||||||
|
|
@ -89,10 +53,6 @@
|
||||||
The deprived devs
|
The deprived devs
|
||||||
</div>
|
</div>
|
||||||
</StickyLayer>
|
</StickyLayer>
|
||||||
|
|
||||||
{#each cosCubesPositions as cosCubePos}
|
|
||||||
<Cube3DCosmetic position={cosCubePos}/>
|
|
||||||
{/each}
|
|
||||||
</Parallax>
|
</Parallax>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,10 +0,0 @@
|
||||||
<script lang="ts">
|
|
||||||
let count: number = 0
|
|
||||||
const increment = () => {
|
|
||||||
count += 10
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<button on:scroll={increment}>
|
|
||||||
count is {count}
|
|
||||||
</button>
|
|
||||||
|
|
@ -1,225 +0,0 @@
|
||||||
<script lang="ts">
|
|
||||||
import planeImg from './images/PlaneGrid.png';
|
|
||||||
import cubeSideImg from './images/CubeTexture.png';
|
|
||||||
|
|
||||||
// Hyperparameters (fine to change)
|
|
||||||
let startPosAnim: number = 1200; // Starts at scroll value
|
|
||||||
let endPosAnim: number = 4000; // Ends at scroll value
|
|
||||||
let parallexOutPadding = 700;
|
|
||||||
let parallaxOutLength = 400; // How long the exit anim is
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// Define, don't touch
|
|
||||||
let scrollPos: number = 0;
|
|
||||||
let cubeRotY: number = 0;
|
|
||||||
let cubeRotX: number = 0;
|
|
||||||
|
|
||||||
// Total length of animation
|
|
||||||
let totalAnimLength: number = endPosAnim - startPosAnim;
|
|
||||||
|
|
||||||
// Front side text after fully scrolled
|
|
||||||
let frontSideText: string[] = ["overlooked", "DEPRIVED"];
|
|
||||||
|
|
||||||
function updateUI(){
|
|
||||||
// Calculates the cube roation
|
|
||||||
let time = (scrollPos - startPosAnim)/totalAnimLength;
|
|
||||||
cubeRotY = lerp(0, 360, clamp(time, 0, 1), true);
|
|
||||||
|
|
||||||
// Start exit anim after main anim
|
|
||||||
time = (scrollPos - (endPosAnim + parallexOutPadding))/(parallaxOutLength + parallexOutPadding);
|
|
||||||
cubeRotX = lerp(0, 15, clamp(time, 0, 1), true);
|
|
||||||
|
|
||||||
// if rotated cube 180deg then change text
|
|
||||||
let frontSide = document.getElementById('front');
|
|
||||||
if (!!frontSide) // if not null
|
|
||||||
{
|
|
||||||
if (scrollPos - startPosAnim < totalAnimLength / 2){
|
|
||||||
frontSide.innerHTML = frontSide.innerHTML.replace(frontSideText[1], frontSideText[0]);
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
frontSide.innerHTML = frontSide.innerHTML.replace(frontSideText[0], frontSideText[1]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Hide plane3d if plane3d turned pass camera
|
|
||||||
let plane3d = document.getElementById('plane3D');
|
|
||||||
if (!!plane3d) // if not null
|
|
||||||
{
|
|
||||||
if (cubeRotX <= 10){
|
|
||||||
plane3d.classList.remove("hide");
|
|
||||||
}
|
|
||||||
else{
|
|
||||||
plane3d.classList.add("hide");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
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} on:scroll={updateUI}/>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
:root {
|
|
||||||
--cube-size: 400px;
|
|
||||||
--cube-color: rgba(125, 125, 125, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
#planeHolder {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
position: absolute;
|
|
||||||
transform-style: preserve-3d;
|
|
||||||
}
|
|
||||||
|
|
||||||
#plane3D {
|
|
||||||
--plane-size: 2500px;
|
|
||||||
|
|
||||||
width: var(--plane-size);
|
|
||||||
height: var(--plane-size);
|
|
||||||
|
|
||||||
transform:
|
|
||||||
rotateX( -90deg )
|
|
||||||
translateZ(calc(var(--plane-size) * -0.25))
|
|
||||||
translateX(calc(var(--plane-size) * -0.45));
|
|
||||||
-moz-transform:
|
|
||||||
rotateX( -90deg )
|
|
||||||
translateZ(calc(var(--plane-size) * -0.25))
|
|
||||||
translateX(calc(var(--plane-size) * -0.45));
|
|
||||||
}
|
|
||||||
|
|
||||||
.image {
|
|
||||||
transform: translateX(calc(var(--cube-size)*-0.5));
|
|
||||||
}
|
|
||||||
|
|
||||||
.text{
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* .rotate1{
|
|
||||||
transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg);
|
|
||||||
} */
|
|
||||||
/* demo: https://codepen.io/mrosati84/pen/kWwXLg */
|
|
||||||
|
|
||||||
#cube-3d-container {
|
|
||||||
width: var(--cube-size);
|
|
||||||
height: var(--cube-size);
|
|
||||||
position: relative;
|
|
||||||
perspective: 500px;
|
|
||||||
-moz-perspective: 1000px;
|
|
||||||
padding: 25px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#cube3d {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
position: absolute;
|
|
||||||
transform-style: preserve-3d;
|
|
||||||
transition: transform 1s cubic-bezier(0,1.32,0,.92);
|
|
||||||
}
|
|
||||||
|
|
||||||
#cube3d div {
|
|
||||||
display: block;
|
|
||||||
border: none;
|
|
||||||
line-height: var(--cube-size);
|
|
||||||
text-align: center;
|
|
||||||
font-size: 65px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cube-sides {
|
|
||||||
position: absolute;
|
|
||||||
width: var(--cube-size);
|
|
||||||
height: var(--cube-size);
|
|
||||||
|
|
||||||
text-decoration: underline;
|
|
||||||
text-underline-offset: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#cube3d #front {
|
|
||||||
transform: rotateY(0deg ) translateZ( calc(var(--cube-size) / 2) );
|
|
||||||
-moz-transform: rotateY( 0deg ) translateZ( calc(var(--cube-size) / 2) );
|
|
||||||
}
|
|
||||||
#cube3d #back {
|
|
||||||
transform: rotateX( 180deg ) translateZ( calc(var(--cube-size) / 2) ) rotateZ(180deg);
|
|
||||||
-moz-transform: rotateX( 180deg ) translateZ( calc(var(--cube-size) / 2) ) rotateZ(180deg);
|
|
||||||
}
|
|
||||||
#cube3d #right {
|
|
||||||
transform: rotateY( 90deg ) translateZ( calc(var(--cube-size) / 2) );
|
|
||||||
-moz-transform: rotateY( 90deg ) translateZ( calc(var(--cube-size) / 2) );
|
|
||||||
}
|
|
||||||
#cube3d #left {
|
|
||||||
transform: rotateY( -90deg ) translateZ( calc(var(--cube-size) / 2) );
|
|
||||||
-moz-transform: rotateY( -90deg ) translateZ( calc(var(--cube-size) / 2) );
|
|
||||||
}
|
|
||||||
/* #cube3d #top {
|
|
||||||
transform: rotateX( 90deg ) translateZ( calc(var(--cube-size) / 2) );
|
|
||||||
-moz-transform: rotateX( 90deg ) translateZ( calc(var(--cube-size) / 2) );
|
|
||||||
}
|
|
||||||
#cube3d #bottom {
|
|
||||||
transform: rotateX( -90deg ) translateZ( calc(var(--cube-size) / 2) );
|
|
||||||
-moz-transform: rotateX( -90deg ) translateZ( calc(var(--cube-size) / 2) );
|
|
||||||
} */
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<div id="cube-3d-container">
|
|
||||||
<!-- Empty div for origin of plane object -->
|
|
||||||
<div id="planeHolder" style="transform: rotateX({cubeRotX}deg);">
|
|
||||||
<img id="plane3D" src={planeImg} alt="3D ground plane"/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="cube3d" style="transform: rotateX({cubeRotY + cubeRotX}deg)">
|
|
||||||
<div id="front" class="cube-sides">
|
|
||||||
<img src="{cubeSideImg}" class="image" style="width: 100%; position: absolute;" alt="cube side texture"/>
|
|
||||||
<p class="text" style="position: relative;">
|
|
||||||
overlooked
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="back" class="cube-sides">
|
|
||||||
<img src="{cubeSideImg}" class="image" style="width: 100%; position: absolute;" alt="cube side texture"/>
|
|
||||||
<p class="text" style="position: relative;">
|
|
||||||
constrained
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="right" class="cube-sides">
|
|
||||||
<img src="{cubeSideImg}" class="image" style="width: 100%; position: absolute;" alt="cube side texture"/>
|
|
||||||
<p class="text" style="position: relative;">
|
|
||||||
drained
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="left" class="cube-sides">
|
|
||||||
<img src="{cubeSideImg}" class="image" style="width: 100%; position: absolute;" alt="cube side texture"/>
|
|
||||||
<p class="text" style="position: relative;">
|
|
||||||
underfunded
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- <div id="top" class="cube-sides">
|
|
||||||
<img src="{cubeSideImg}" style="width: 100%;" alt="cube side texture"/>
|
|
||||||
5
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="bottom" class="cube-sides">
|
|
||||||
<img src="{cubeSideImg}" style="width: 100%;" alt="cube side texture"/>
|
|
||||||
6
|
|
||||||
</div> -->
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
@ -1,117 +0,0 @@
|
||||||
<script lang="ts">
|
|
||||||
import { ParallaxLayer } from 'svelte-parallax';
|
|
||||||
import cubeSideImg from './images/CubeTextureTransparent.png';
|
|
||||||
|
|
||||||
export let position: number;
|
|
||||||
|
|
||||||
let scrollPos: number = 0;
|
|
||||||
|
|
||||||
function updateUI(){
|
|
||||||
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<svelte:window bind:scrollY={scrollPos} on:scroll={updateUI}/>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
:root {
|
|
||||||
--cube-cosmetic-size: 400px;
|
|
||||||
--cube-cosmetic-color: rgba(125, 125, 125, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.image {
|
|
||||||
transform: translateX(calc(var(--cube-cosmetic-size)*-0.5));
|
|
||||||
}
|
|
||||||
|
|
||||||
#cube-3d-container {
|
|
||||||
width: var(--cube-cosmetic-size);
|
|
||||||
height: var(--cube-cosmetic-size);
|
|
||||||
position: relative;
|
|
||||||
perspective: 500px;
|
|
||||||
-moz-perspective: 1000px;
|
|
||||||
padding: 25px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#cube3d {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
position: absolute;
|
|
||||||
transform-style: preserve-3d;
|
|
||||||
transition: transform 1s cubic-bezier(0,1.32,0,.92);
|
|
||||||
}
|
|
||||||
|
|
||||||
#cube3d div {
|
|
||||||
display: block;
|
|
||||||
border: none;
|
|
||||||
line-height: var(--cube-cosmetic-size);
|
|
||||||
text-align: center;
|
|
||||||
font-size: 65px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cube-sides {
|
|
||||||
position: absolute;
|
|
||||||
width: var(--cube-cosmetic-size);
|
|
||||||
height: var(--cube-cosmetic-size);
|
|
||||||
|
|
||||||
text-decoration: underline;
|
|
||||||
text-underline-offset: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#cube3d #front {
|
|
||||||
transform: rotateY(0deg ) translateZ( calc(var(--cube-cosmetic-size) / 2) );
|
|
||||||
-moz-transform: rotateY( 0deg ) translateZ( calc(var(--cube-cosmetic-size) / 2) );
|
|
||||||
}
|
|
||||||
#cube3d #back {
|
|
||||||
transform: rotateX( 180deg ) translateZ( calc(var(--cube-cosmetic-size) / 2) ) rotateZ(180deg);
|
|
||||||
-moz-transform: rotateX( 180deg ) translateZ( calc(var(--cube-cosmetic-size) / 2) ) rotateZ(180deg);
|
|
||||||
}
|
|
||||||
#cube3d #right {
|
|
||||||
transform: rotateY( 90deg ) translateZ( calc(var(--cube-cosmetic-size) / 2) );
|
|
||||||
-moz-transform: rotateY( 90deg ) translateZ( calc(var(--cube-cosmetic-size) / 2) );
|
|
||||||
}
|
|
||||||
#cube3d #left {
|
|
||||||
transform: rotateY( -90deg ) translateZ( calc(var(--cube-cosmetic-size) / 2) );
|
|
||||||
-moz-transform: rotateY( -90deg ) translateZ( calc(var(--cube-cosmetic-size) / 2) );
|
|
||||||
}
|
|
||||||
#cube3d #top {
|
|
||||||
transform: rotateX( 90deg ) translateZ( calc(var(--cube-cosmetic-size) / 2) );
|
|
||||||
-moz-transform: rotateX( 90deg ) translateZ( calc(var(--cube-cosmetic-size) / 2) );
|
|
||||||
}
|
|
||||||
#cube3d #bottom {
|
|
||||||
transform: rotateX( -90deg ) translateZ( calc(var(--cube-cosmetic-size) / 2) );
|
|
||||||
-moz-transform: rotateX( -90deg ) translateZ( calc(var(--cube-cosmetic-size) / 2) );
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<ParallaxLayer offset={position}>
|
|
||||||
<div id="cube-3d-container">
|
|
||||||
|
|
||||||
<div id="cube3d" style="transform: rotateX(0deg)">
|
|
||||||
<div id="front" class="cube-sides">
|
|
||||||
<img src="{cubeSideImg}" class="image" style="width: 100%; position: absolute;" alt="cube side texture"/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="back" class="cube-sides">
|
|
||||||
<img src="{cubeSideImg}" class="image" style="width: 100%; position: absolute;" alt="cube side texture"/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="right" class="cube-sides">
|
|
||||||
<img src="{cubeSideImg}" class="image" style="width: 100%; position: absolute;" alt="cube side texture"/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="left" class="cube-sides">
|
|
||||||
<img src="{cubeSideImg}" class="image" style="width: 100%; position: absolute;" alt="cube side texture"/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="top" class="cube-sides">
|
|
||||||
<img src="{cubeSideImg}" class="image" style="width: 100%; position: absolute;" alt="cube side texture"/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="bottom" class="cube-sides">
|
|
||||||
<img src="{cubeSideImg}" class="image" style="width: 100%; position: absolute;" alt="cube side texture"/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</ParallaxLayer>
|
|
||||||
|
|
@ -1,88 +0,0 @@
|
||||||
<script lang="ts">
|
|
||||||
let chunkSize: number = 750;
|
|
||||||
let chunks: number = 3;
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
export let allChunkHeight: number = chunkSize * chunks;
|
|
||||||
let scrollPosition: number = 0;
|
|
||||||
|
|
||||||
function handleScroll() {
|
|
||||||
const divElement = document.getElementById('scrollContainer');
|
|
||||||
scrollPosition = divElement.scrollTop;
|
|
||||||
|
|
||||||
let currectChunk: number = scrollPosition / chunkSize;
|
|
||||||
let chunkProgress: number = scrollPosition % chunkSize;
|
|
||||||
|
|
||||||
let typingIndex: number = (Math.ceil(currectChunk));
|
|
||||||
|
|
||||||
if (chunkSize * 0.2 < chunkProgress
|
|
||||||
&& chunkProgress < chunkSize * 0.65){
|
|
||||||
divElement.style.color = "pink";
|
|
||||||
document.getElementById('TypingIndex_' + typingIndex).classList.add('typewriter');
|
|
||||||
}
|
|
||||||
else{
|
|
||||||
divElement.style.color = "lightblue";
|
|
||||||
document.getElementById('TypingIndex_' + typingIndex).classList.remove('typewriter');
|
|
||||||
}
|
|
||||||
|
|
||||||
console.log(scrollPosition + ">" + (allChunkHeight - chunkSize - 150));
|
|
||||||
if (scrollPosition > allChunkHeight - chunkSize - 150){
|
|
||||||
document.getElementById('scrollContainer').classList.add('no-interact');
|
|
||||||
}
|
|
||||||
else{
|
|
||||||
document.getElementById('scrollContainer').classList.remove('no-interact');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.container {
|
|
||||||
width: 100%;
|
|
||||||
height: 100vh;
|
|
||||||
overflow-y: scroll;
|
|
||||||
z-index: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.scrollText {
|
|
||||||
width: 100%;
|
|
||||||
background-color: darkslateblue;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
z-index: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.center-screen {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
width: 50px;
|
|
||||||
height: 100vh;
|
|
||||||
position:absolute;
|
|
||||||
left:0;
|
|
||||||
right:0;
|
|
||||||
top: 0;
|
|
||||||
bottom: 0;
|
|
||||||
margin:auto;
|
|
||||||
z-index: 0;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<div style="height: 100vh;">
|
|
||||||
<div class="center-screen big-text no-wrap no-interact">
|
|
||||||
We are
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="container" id="scrollContainer" on:scroll={handleScroll}>
|
|
||||||
<div class="scrollText" style="height: {allChunkHeight}px;">
|
|
||||||
{#each {length: chunks} as _, i}
|
|
||||||
<div id="ChunkIndex_{i}" class="chunk" style="height: {chunkSize}px; z-index: 0;">
|
|
||||||
{scrollPosition}
|
|
||||||
<div id="TypingIndex_{i}">
|
|
||||||
<h1>{i} The cat and the hat.</h1>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{/each}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
@ -1,56 +1,11 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import ZSpacer from "./Universal/ZSpacer.svelte";
|
import ZSpacer from "./Universal/ZSpacer.svelte";
|
||||||
|
|
||||||
// Hyperparams
|
|
||||||
let startExit = 4700;
|
|
||||||
let exitLength = 2000;
|
|
||||||
let exitScreenLength = 700;
|
|
||||||
let textMaxRotation = 30;
|
|
||||||
let parallaxOffset = 1.0125;
|
|
||||||
|
|
||||||
// Define, don't touch
|
|
||||||
let scrollPos: number = 0;
|
|
||||||
let extraPosY = 0;
|
|
||||||
let rotation = 0;
|
|
||||||
|
|
||||||
// Define: Parallax text
|
|
||||||
let extraPosY2 = 0;
|
|
||||||
let rotation2 = 0;
|
|
||||||
|
|
||||||
$:{
|
|
||||||
let time = (scrollPos - startExit) / exitLength;
|
|
||||||
extraPosY = lerp(0, -exitScreenLength, time, true);
|
|
||||||
rotation = lerp(0, textMaxRotation, time, true);
|
|
||||||
|
|
||||||
extraPosY2 = lerp(0, -exitScreenLength, time * parallaxOffset, true);
|
|
||||||
rotation2 = lerp(0, textMaxRotation, 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>
|
</script>
|
||||||
|
|
||||||
<svelte:window bind:scrollY={scrollPos} />
|
|
||||||
|
|
||||||
<div class="horizontal">
|
<div class="horizontal">
|
||||||
<div id="WeAreHolder" class="align-center" style="margin-right: 35vw; position: relative;">
|
<div id="WeAreHolder" class="align-center" style="margin-right: 35vw; position: relative;">
|
||||||
<div class="no-wrap no-interact big-text align-center WeAreText"
|
<div class="no-wrap no-interact big-text align-center WeAreText"
|
||||||
style="color: #c9c9c9; transform: translate(0, {extraPosY}px) rotateX({rotation}deg); position: absolute;">
|
style="color: #ffffff; position: absolute;">
|
||||||
We are
|
|
||||||
</div>
|
|
||||||
<div class="no-wrap no-interact big-text align-center WeAreText"
|
|
||||||
style="color: #ffffff; transform: translate(0, {extraPosY2}px) rotateX({rotation2}deg); position: absolute;">
|
|
||||||
We are
|
We are
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 84 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 86 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 250 KiB |
Loading…
Reference in New Issue