feat: add photo header slideshow like on windows 8 tiles

index.html

@@ -86,9 +86,19 @@
         <div class="flex flex-wrap gap-8 w-fit">
             <!-- Photo Links -->
             <div class="flex flex-col w-[416px] gap-4">
-                <div class="relative w-[416px] h-[376px] flex justify-end items-end">
+                <div class="relative w-[416px] h-[376px] flex justify-end items-end overflow-hidden" id="photos-image">
-                    <img class="absolute inset-0 object-cover w-full h-full -z-10" alt=""
+                    <img class="absolute inset-0 object-cover w-full h-full -z-10 translate-y-[var(--transform-y,0)] transition-transform duration-[var(--transform-duration,150ms)]" alt=""
-                        src="./static/assets/photos_section_image.png" />
+                        src="./static/assets/photo_building.png" data-section-image="photos" data-slide="0" data-photo="photo_building" />
+                    <img class="absolute inset-0 object-cover w-full h-full -z-10 translate-y-[var(--transform-y,0)] transition-transform duration-[var(--transform-duration,150ms)]" alt=""
+                        src="./static/assets/photo_dandelion.png" data-section-image="photos" data-slide="1" data-photo="photo_dandelion" />
+                    <img class="absolute inset-0 object-cover w-full h-full -z-10 translate-y-[var(--transform-y,0)] transition-transform duration-[var(--transform-duration,150ms)]" alt=""
+                        src="./static/assets/photo_flowers.png" data-section-image="photos" data-slide="2" data-photo="photo_flowers" />
+                    <img class="absolute inset-0 object-cover w-full h-full -z-10 translate-y-[var(--transform-y,0)] transition-transform duration-[var(--transform-duration,150ms)]" alt=""
+                        src="./static/assets/photo_plush.png" data-section-image="photos" data-slide="3" data-photo="photo_plush" />
+                    <img class="absolute inset-0 object-cover w-full h-full -z-10 translate-y-[var(--transform-y,0)] transition-transform duration-[var(--transform-duration,150ms)]" alt=""
+                        src="./static/assets/photo_tower.png" data-section-image="photos" data-slide="4" data-photo="photo_tower" />
+                    <img class="absolute inset-0 object-cover w-full h-full -z-10 translate-y-[var(--transform-y,0)] transition-transform duration-[var(--transform-duration,150ms)]" alt=""
+                        src="./static/assets/photo_trains.png" data-section-image="photos" data-slide="5" data-photo="photo_trains" />
                     <p class="font-bold text-[40px] leading-[1] p-[8px]">PHOTOS</p>
                 </div>
                 <div class="flex flex-wrap gap-4">

static/script.js

@@ -1,11 +1,18 @@
-function sleep(time) {
+// Animation durations in ms
-  return new Promise((resolve) => setTimeout(resolve, time));
+const SONG_CHANGE_DELAY = 180000;
-}
-
 const SYMBOL_DELAY = 150;
+
+const IMAGE_CHANGE_DELAY = 6000;
+const IMAGE_ANIMATION_DELAY = 1000;
+const IMAGE_TRANSITION_DELAY = 1000;
+
+// Header percentages
+const HEADER_ACTIVATION_PERCENT = 30;
+const HEADER_DEACTIVATION_PERCENT = 20;
+
+// THIS IS NOT CONSTANTS, BUT A GLOBAL VAR FOR TIMERS IN SONG NAME CHANGE!!!
 let DELETE_INTERVAL = null;
 let UPDATE_INTERVAL = null;
-
 function deletePreviousTrack(newTrackName) {
   const trackName = document.getElementById("track-name");
   const prevTrackNameLen = trackName.innerHTML.length;
@@ -88,20 +95,6 @@ async function updatePlayingTrack() {
     });
 }
 
-window.onload = () => {
-  updatePlayingTrack();
-  setInterval(updatePlayingTrack, 180000);
-};
-
-function getScrollPosition() {
-  const height =
-    document.documentElement.scrollHeight -
-    document.documentElement.clientHeight;
-  const windowScroll = document.documentElement.scrollTop;
-  const scrolled = (windowScroll / height) * 100;
-  return Math.floor(scrolled);
-}
-
 function getBlockScrollPosition(block_id) {
   const blockHeight = document.getElementById(block_id).clientHeight;
   const fullPageHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
@@ -118,8 +111,6 @@ function getBlockScrollPosition(block_id) {
 const header = document.getElementById("header");
 let last_Y_pos = 0;
 let header_opacity = 0;
-const HEADER_ACTIVATION_PERCENT = 30;
-const HEADER_DEACTIVATION_PERCENT = 20;
 
 window.onscroll = () => {
   let scrollPosition = getBlockScrollPosition('section_landing');
@@ -143,3 +134,49 @@ window.onscroll = () => {
 
   header.style.setProperty("--header-opacity", `${header_opacity.toFixed(2)}`);
 };
+
+function setPhotoSectionImagesMargin() {
+  const photoSectionImages = document.querySelectorAll("[data-section-image='photos']")
+  for (i = 0; i < photoSectionImages.length; i++) {
+    photoSectionImages[i].style.setProperty("--transform-duration", `${IMAGE_TRANSITION_DELAY}ms`)
+  }
+  for (i = 1; i < photoSectionImages.length; i++) {
+    photoSectionImages[i].style.setProperty("--transform-y", `calc(376px*-${i})`)
+    photoSectionImages[i].style.setProperty("display", `none`)
+  }
+}
+
+function changePhotoSectionImage() {
+  const photoSectionImages = document.querySelectorAll("[data-section-image='photos']")
+  const photoSectionContainer = document.getElementById("photos-image")
+  photoSectionImages[1].style.setProperty("display", `block`)
+
+  setTimeout(() => {
+    photoSectionImages[0].style.setProperty("--transform-y", `376px`)
+    photoSectionImages[1].style.setProperty("--transform-y", `0px`)
+  }, IMAGE_TRANSITION_DELAY / 2)
+
+  setTimeout(() => {
+    photoSectionImages[0].style.setProperty("display", `none`)
+    const backEl = document.querySelector(`[data-section-image='photos'][data-slide='0']`).cloneNode(true)
+    photoSectionContainer.removeChild(document.querySelector(`[data-section-image='photos'][data-slide='0']`))
+    backEl.setAttribute('data-slide', photoSectionImages.length - 1)
+    photoSectionContainer.appendChild(backEl)
+  }, (IMAGE_ANIMATION_DELAY + IMAGE_TRANSITION_DELAY))
+
+  setTimeout(() => {
+    const photoSectionImagesRev = document.querySelectorAll("[data-section-image='photos']")
+    for (i = 1; i < photoSectionImagesRev.length; i++) {
+      const element = document.querySelector(`[data-section-image='photos'][data-slide='${i}']`)
+      element.style.setProperty("--transform-y", `calc(376px*-${Number(element.getAttribute('data-slide')) - 1})`)
+      element.setAttribute('data-slide', Number(element.getAttribute('data-slide')) - 1)
+    }
+  }, (IMAGE_ANIMATION_DELAY + (IMAGE_TRANSITION_DELAY + 500)))
+}
+
+window.onload = () => {
+  updatePlayingTrack();
+  setInterval(updatePlayingTrack, 180000);
+  setPhotoSectionImagesMargin()
+  setInterval(changePhotoSectionImage, IMAGE_CHANGE_DELAY);
+};

static/tailwind.css

@@ -882,6 +882,11 @@ video {
   max-width: 53.75%;
 }
 
+.translate-y-\[var\(--transform-y\2c 0\)\] {
+  --tw-translate-y: var(--transform-y,0);
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .scroll-mt-24 {
   scroll-margin-top: 6rem;
 }
@@ -1249,6 +1254,16 @@ video {
   transition-duration: 150ms;
 }
 
+.transition-transform {
+  transition-property: transform;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.duration-\[var\(--transform-duration\2c 150ms\)\] {
+  transition-duration: var(--transform-duration,150ms);
+}
+
 .\[filter\:darken\(10\%\)\] {
   filter: darken(10%);
 }