diff --git a/public/scripts/text-scramble.js b/public/scripts/text-scramble.js index aa0ad91..bcebb80 100644 --- a/public/scripts/text-scramble.js +++ b/public/scripts/text-scramble.js @@ -1,99 +1,105 @@ function applyScrambleEffect() { const glitchTextOnceElements = document.querySelectorAll('.glitch-text'); const glitchTextRepeatElements = document.querySelectorAll('.glitch-text-interval'); + const glitchTextHoverElements = document.querySelectorAll('.glitch-text-hover'); + const charset = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; + function animateScramble(element, text, duration = 1000) { - const chars = []; - element.innerHTML = ''; - const preScrambleWidth = element.offsetWidth; - element.style.width = `${preScrambleWidth}px`; - - for (let t = 0; t < text.length; t++) { - const span = document.createElement('span'); - span.innerHTML = text[t] === ' ' ? ' ' : text[t]; - chars[t] = span; - span.style.display = 'inline-block'; - element.appendChild(span); - } - - const rand = Math.random; - const SECONDS = 1000; - const FPS = 30; - const animationLength = duration; - - function animate3(k) { - const kk = k * text.length; - for (let i = 0; i < text.length; i++) { - if (kk < i) { - chars[i].innerHTML = String.fromCharCode(~~(65 + rand() * 26)); - } else { - chars[i].innerHTML = text[i] === ' ' ? ' ' : text[i]; - } + const chars = []; + element.innerHTML = ''; + const preScrambleWidth = element.offsetWidth; + element.style.width = `${preScrambleWidth}px`; + + for (let t = 0; t < text.length; t++) { + const span = document.createElement('span'); + span.innerHTML = text[t] === ' ' ? ' ' : text[t]; + chars[t] = span; + span.style.display = 'inline-block'; + element.appendChild(span); } - } - - let start = Date.now(); - function animate() { - const current = Date.now(); - const time = current - start; - const k = time / animationLength; - - if (k < 1) { - setTimeout(animate, SECONDS / FPS); - animate3(k); - } else { - for (let i = 0; i < text.length; i++) { - chars[i].innerHTML = text[i] === ' ' ? ' ' : text[i]; - } - element.style.width = 'auto'; - element.isAnimating = false; + + const rand = Math.random; + const SECONDS = 1000; + const FPS = 30; + const animationLength = duration; + + function animate3(k) { + const kk = k * text.length; + for (let i = 0; i < text.length; i++) { + if (kk < i) { + chars[i].innerHTML = charset[Math.floor(rand() * charset.length)]; + } else { + chars[i].innerHTML = text[i] === ' ' ? ' ' : text[i]; + } + } } - } - - animate(); + + let start = Date.now(); + function animate() { + const current = Date.now(); + const time = current - start; + const k = time / animationLength; + + if (k < 1) { + setTimeout(animate, SECONDS / FPS); + animate3(k); + } else { + for (let i = 0; i < text.length; i++) { + chars[i].innerHTML = text[i] === ' ' ? ' ' : text[i]; + } + element.style.width = 'auto'; + element.isAnimating = false; + } + } + + animate(); } - + + // Use IntersectionObserver for once-only animation const observer = new IntersectionObserver((entries, observer) => { - entries.forEach(entry => { - if (entry.isIntersecting) { - const element = entry.target; - const text = element.innerText; - animateScramble(element, text); - observer.unobserve(element); - } - }); + entries.forEach(entry => { + if (entry.isIntersecting) { + const element = entry.target; + const text = element.innerText; + animateScramble(element, text); + observer.unobserve(element); + } + }); }, { - threshold: 0.1 + threshold: 0.1 }); - + glitchTextOnceElements.forEach((element) => { - observer.observe(element); + observer.observe(element); }); - + glitchTextRepeatElements.forEach((element) => { - const text = element.innerText; - - animateScramble(element, text); - - const intervalId = setInterval(() => { - if (!element.isAnimating) { - animateScramble(element, text); - } - }, 5000); - - element.addEventListener('mouseenter', () => { - if (!element.isAnimating) { - clearInterval(intervalId); - animateScramble(element, text, 800); - element.isAnimating = true; - - setTimeout(() => { - element.isAnimating = false; - }, 1000); - } - }); + const text = element.innerText; + + animateScramble(element, text); + + const intervalId = setInterval(() => { + if (!element.isAnimating) { + animateScramble(element, text); + } + }, 5000); }); - } - - document.addEventListener('DOMContentLoaded', applyScrambleEffect); - \ No newline at end of file + + // Hover functionality for `.glitch-text-hover` elements + glitchTextHoverElements.forEach((element) => { + const text = element.innerText; + + element.addEventListener('mouseenter', () => { + // Only start the animation if it isn't already in progress + if (!element.isAnimating) { + element.isAnimating = true; + animateScramble(element, text, 800); + } + }); + + // No need for 'mouseleave' as the animation will complete even if the mouse leaves + }); +} + +document.addEventListener('DOMContentLoaded', applyScrambleEffect); diff --git a/src/components/AboutFooter.astro b/src/components/AboutFooter.astro index 2d656be..0afa6a7 100644 --- a/src/components/AboutFooter.astro +++ b/src/components/AboutFooter.astro @@ -111,7 +111,7 @@ const sortedSections = sectionsConfig {section.name === "contributors" && (

Contributors

-
+
{contributors.items.map((contrib) => (
-
-
+
+
{ filteredPeople.map((person) => ( diff --git a/src/pages/index.astro b/src/pages/index.astro index 8354e10..6ef24dd 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -58,7 +58,7 @@ for (const e of upcomingEvents) { class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 w3pn-hp-grid gap-2 mt-2" >
-
Events
+
Events
-
Research
+
Research
{core.research.length} research projects →
@@ -115,12 +116,9 @@ for (const e of upcomingEvents) {
-
-

Featured Events

+

Featured Events

@@ -149,7 +147,7 @@ for (const e of upcomingEvents) {
-

Latest Articles

+

Latest Articles

@@ -180,7 +178,7 @@ for (const e of upcomingEvents) {
-

Latest Talks

+

Latest Talks

diff --git a/src/styles/base.css b/src/styles/base.css index ad9c553..c228f1c 100644 --- a/src/styles/base.css +++ b/src/styles/base.css @@ -33,6 +33,25 @@ U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } +.glitch-text { + font-family: Major Mono Display, ui-monospace, SFMono-Regular, Menlo, Monaco, + Consolas, "Liberation Mono", "Courier New", monospace; + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 500ms; + text-transform: lowercase!important; + flex-wrap: nowrap; +} + +.testimonial-fade { + opacity: 0; + transition: opacity 0.2s ease-in-out; +} + +.testimonial-fade.active { + opacity: 1; +} + @tailwind components; @layer components { @@ -86,7 +105,6 @@ a.button button { fill: #fff; stroke: #fff; - } a.button button::after {