Added 3d cube and run shell script

run.sh

@@ -0,0 +1,10 @@
+#!/bin/bash
+
+# Enable echoing of commands
+set -x
+
+# Install npm dependencies
+npm install
+
+# Run the development script
+npm run dev

src/App.svelte

@@ -1,10 +1,50 @@
-<script>
+<script lang="ts">
   import svelteLogo from './assets/svelte.svg'
   import StartVideo from './assets/StartVideo.gif'
   import ScrollTextComponent from './lib/ScrollTextComponent.svelte'
   import { Parallax, ParallaxLayer, StickyLayer } from 'svelte-parallax';
+  import ZSpacer from './lib/ZSpacer.svelte';
+
+  window.onload = function() {
+    window.scrollTo(0, 100);
+  };
+
+  let scrollPos: number = 0;
+  let rotation: number = 0;
+
+  let startPosAnim: number = 150;
+  let endPosAnim: number = 1600;
+
+  function rotateCube() {
+    //incremtent
+    rotation += 90;
+  }
+  
+
+  $: {
+    let time = (scrollPos - startPosAnim)/endPosAnim;
+    rotation = lerp(0, 360, clamp(time, 0, 1), true);
+    console.log(time + " -> " + rotation);
+  }
+
+
+  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} />
+
 <main>
   <div class="topnav">
     <a class="active" href="#home">Home</a>
@@ -13,7 +53,37 @@
     <a href="#about">About</a>
   </div> 
 
-  <!-- <ScrollTextComponent /> -->
+  <Parallax sections={3} config={{stiffness: 0.2, damping: 0.3}}>
+    <ParallaxLayer rate={0} span={3} style="background-color: #242424;" />
+
+    <StickyLayer offset={{ top: 0, bottom: 2 }}>
+      <button on:click={rotateCube}>
+        Rotate
+      </button>
+
+      <div class="horizontal" style="padding: 200px;">
+        <div>
+          test {scrollPos}
+        </div>
+    
+        <ZSpacer/>
+    
+        <div id="cube-3d-container">
+          <div id="cube3d" style="transform:rotateY({rotation}deg);">
+            <div class="front">1</div>
+            <div class="back">2</div>
+            <div class="right">3</div>
+            <div class="left">4</div>
+            <div class="top">5</div>
+            <div class="bottom">6</div>
+          </div>
+        </div>
+      </div>
+    </StickyLayer>
+  </Parallax>
+
+  <!-- 
+  <ScrollTextComponent />
   <Parallax sections={3} config={{stiffness: 0.2, damping: 0.3}}>
     <ParallaxLayer rate={0} span={3} style="background-color: orange;" />
   
@@ -31,8 +101,11 @@
   
     <ParallaxLayer rate={2} offset={2} style="background-color: lightblue;" />
   </Parallax>
+  -->
+
 </main>
 
 <style>
+@import './cube3d.css';
 </style>
 

src/app.css

@@ -61,4 +61,9 @@ body {
 .topnav a.active {
   background-color: #04AA6D;
   color: white;
+}
+
+.horizontal{
+  display: flex;
+  justify-content: flex-start;
 }

src/cube3d.css

@@ -0,0 +1,110 @@
+/* .rotate1{
+  transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg);
+} */
+/* demo: https://codepen.io/mrosati84/pen/kWwXLg */
+
+:root {
+    --cube-size: 400px;
+}
+
+#cube-3d-container {
+    width: var(--cube-size);
+    height: var(--cube-size);
+    position: relative;
+    perspective: 1000px;
+    -moz-perspective: 1000px;
+    padding: 25px;
+  }
+  
+  #cube3d {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    transform-style: preserve-3d;
+    transition: transform 1s ease-out;
+  }
+  
+  #cube3d div {
+    width: var(--cube-size);
+    height: var(--cube-size);
+    display: block;
+    position: absolute;
+    border: none;
+    line-height: var(--cube-size);
+    text-align: center;
+    font-size: 50px;
+    font-weight: bold;
+  }
+  
+  .front {
+    background: rgba(255,0,0,.5);
+  }
+  
+  .back {
+    background: rgba(0,255,0,.5);
+  }
+  
+  .right {
+    background: rgba(0,0,255,.5);
+  }
+  
+  .left {
+    background: rgba(0,255,255,.5);
+  }
+  
+  .top {
+    background: rgba(255,0,255,.5);
+  }
+  
+  .bottom {
+    background: rgba(255,255,0,.5);
+  }
+    
+  /* .front {
+    background: url('https://i1.sndcdn.com/avatars-IesRuX9vhlBZzVuz-1H6bOA-t500x500.jpg');
+  }
+  
+  .back {
+    background: url('https://i1.sndcdn.com/avatars-IesRuX9vhlBZzVuz-1H6bOA-t500x500.jpg');
+  }
+  
+  .right {
+    background: url('https://i1.sndcdn.com/avatars-IesRuX9vhlBZzVuz-1H6bOA-t500x500.jpg');
+  }
+  
+  .left {
+    background: url('https://i1.sndcdn.com/avatars-IesRuX9vhlBZzVuz-1H6bOA-t500x500.jpg');
+  }
+  
+  .top {
+    background: url('https://i1.sndcdn.com/avatars-IesRuX9vhlBZzVuz-1H6bOA-t500x500.jpg');
+  }
+  
+  .bottom {
+    background: url('https://i1.sndcdn.com/avatars-IesRuX9vhlBZzVuz-1H6bOA-t500x500.jpg');
+  } */
+  
+  #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) );
+    -moz-transform: rotateX( 180deg ) translateZ( calc(var(--cube-size) / 2) );
+  }
+  #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) );
+  }

src/lib/ZSpacer.svelte

@@ -0,0 +1,2 @@
+<!-- Short hand for spacing between components-->
+<div style="flex-grow: 1;"/>