Minor changes

src/lib/Cube3D.svelte

@@ -0,0 +1,155 @@
+<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>
+  @import './Cube3D.css';
+
+    :root {
+        --cube-size: 400px;
+        --cube-color: rgba(125, 125, 125, 1);
+    }
+
+  #plane3D {
+    --plane-size: 2500px;
+
+    width: var(--plane-size);
+    height: var(--plane-size);
+
+    position: absolute;
+
+    transform: 
+        rotateX( -90deg ) 
+        translateZ(calc(var(--plane-size) * -0.34))
+        translateX(calc(var(--plane-size) * -0.45));
+    -moz-transform: 
+        rotateX( -90deg ) 
+        translateZ(calc(var(--plane-size) * -0.34))
+        translateX(calc(var(--plane-size) * -0.45));
+    }
+
+    .image {
+        transform: translateX(calc(var(--cube-size)*-0.5));
+    }
+
+    .text{
+        margin: 0;
+    }
+</style>
+
+<div id="cube-3d-container">
+    <div id="cube3d"style="transform: rotateY({cubeRotY}deg) rotateX({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> -->
+
+        
+
+        <img id="plane3D" src={planeImg} alt="3D ground plane"/>
+    </div>
+
+</div>