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