From c897284c4d8a8275ead18f211abfb934120edf20 Mon Sep 17 00:00:00 2001
From: Adam Iannazzone <46025473+jiannazzone@users.noreply.github.com>
Date: Fri, 20 Dec 2024 09:34:07 -0500
Subject: [PATCH] Add "pulse" to screenshots to indicate interactivity

---
 css/carousel.css    | 16 ++++++++++++++++
 scripts/carousel.js | 27 ++++++++++++++++++++++-----
 2 files changed, 38 insertions(+), 5 deletions(-)

diff --git a/css/carousel.css b/css/carousel.css
index 11de206..54ce816 100644
--- a/css/carousel.css
+++ b/css/carousel.css
@@ -23,6 +23,7 @@
   left: calc(-100% + 15px);
   bottom: 15px;
 }
+
 .screenshot:nth-child(1) {
   z-index: 2;
   left: 30px;
@@ -69,4 +70,19 @@ with different numbers of slides
     bottom: 30px;
     scale: 1.0;
   }
+}
+
+@keyframes pulse {
+  25% {
+    scale: 1.05
+  }
+  50% {
+    scale: 1.00
+  }
+  75% {
+    scale: 0.95
+  }
+  100% {
+    scale: 1.00
+  }
 }
\ No newline at end of file
diff --git a/scripts/carousel.js b/scripts/carousel.js
index 50e3ab5..9f429d0 100644
--- a/scripts/carousel.js
+++ b/scripts/carousel.js
@@ -1,4 +1,4 @@
-let timing = 250;
+let swapTiming = 250;
 let stacks = document.getElementsByClassName('stack');
 
 for (let i = 0; i < stacks.length; i++) {
@@ -12,15 +12,32 @@ for (let i = 0; i < stacks.length; i++) {
 function swap(e) {
     let thisTarget = e.target
     if (!thisTarget.classList.contains('screenshot')) return;
-    thisTarget.style.animation = `fade-out ${timing}ms ease-in forwards`;
+    thisTarget.style.animation = `fade-out ${swapTiming}ms ease-in forwards`;
 
     setTimeout(() => {
-        thisTarget.style.animation = `fade-in ${timing}ms ease-out forwards`;
+        thisTarget.style.animation = `fade-in ${swapTiming}ms ease-out forwards`;
         this.prepend(thisTarget);
-    }, timing);
+    }, swapTiming);
 
     setTimeout(() => {
         // this.prepend(thisTarget);
         thisTarget.style = '';
-    }, 2*timing);
+    }, 2*swapTiming);
+}
+
+window.addEventListener('scroll', pulseFeatures);
+function pulseFeatures() {
+    let features = document.getElementById('features');
+    let featuresRect = features.getBoundingClientRect()
+    let stacks = document.getElementsByClassName('stack');
+    let screenshots = document.getElementsByClassName('screenshot');
+    let pulseTiming = 500;
+    let pulseDelay = 50;
+    
+    if (window.scrollY > featuresRect.y + featuresRect.height/3) {
+        for (let i = 0; i < screenshots.length; i++) {
+            screenshots[i].style.animation = `pulse ${pulseTiming}ms ease-in-out ${pulseDelay*i}ms forwards`;
+        }
+        window.removeEventListener('scroll', pulseFeatures);
+    }
 }
\ No newline at end of file