From a7b915c49aa8f41d650bf2f66c0b3462127c982d Mon Sep 17 00:00:00 2001 From: MugunthPerumal Date: Mon, 6 Jul 2026 07:58:29 +0530 Subject: [PATCH] feat: add scroll-triggered animations using IntersectionObserver Added smooth fade-in and slide-up animations that trigger as users scroll through the page. Game cards get staggered reveal effects, while the contributors section and footer animate into view on scroll. Changes: - New: assets/css/scroll-animate.css (scroll animation styles) - New: assets/js/scroll-animate.js (IntersectionObserver-based scroll trigger) - Modified: index.html (linked new CSS/JS, added scroll-hidden classes to below-fold sections) --- assets/css/scroll-animate.css | 28 ++++++++++++++++++++++++++ assets/js/scroll-animate.js | 38 +++++++++++++++++++++++++++++++++++ index.html | 6 ++++-- 3 files changed, 70 insertions(+), 2 deletions(-) create mode 100644 assets/css/scroll-animate.css create mode 100644 assets/js/scroll-animate.js diff --git a/assets/css/scroll-animate.css b/assets/css/scroll-animate.css new file mode 100644 index 0000000000..2900ca0e9d --- /dev/null +++ b/assets/css/scroll-animate.css @@ -0,0 +1,28 @@ +/* Scroll-triggered animations */ +.scroll-hidden { + opacity: 0; + transform: translateY(40px); + transition: opacity 0.8s ease, transform 0.8s ease; +} + +.scroll-hidden.from-left { + transform: translateX(-60px); +} + +.scroll-hidden.from-right { + transform: translateX(60px); +} + +.scroll-hidden.scale-in { + transform: scale(0.85); +} + +.scroll-visible { + opacity: 1 !important; + transform: translateY(0) translateX(0) scale(1) !important; +} + +/* Stagger game cards */ +.project-item.scroll-hidden { + transition-delay: calc(var(--anim-order, 0) * 0.08s); +} diff --git a/assets/js/scroll-animate.js b/assets/js/scroll-animate.js new file mode 100644 index 0000000000..d23f5c2db2 --- /dev/null +++ b/assets/js/scroll-animate.js @@ -0,0 +1,38 @@ +// Scroll-triggered animations using IntersectionObserver +(function () { + const observer = new IntersectionObserver( + (entries) => { + entries.forEach((entry) => { + if (entry.isIntersecting) { + entry.target.classList.add("scroll-visible"); + observer.unobserve(entry.target); + } + }); + }, + { threshold: 0.15 } + ); + + function observeElements() { + // Static sections + document.querySelectorAll(".scroll-hidden").forEach((el) => observer.observe(el)); + + // Dynamically loaded game cards + const list = document.querySelector(".project-list"); + if (list) { + const mo = new MutationObserver(() => { + list.querySelectorAll(".project-item:not(.scroll-hidden):not(.scroll-visible)").forEach((el, i) => { + el.classList.add("scroll-hidden"); + el.style.setProperty("--anim-order", i % 12); + observer.observe(el); + }); + }); + mo.observe(list, { childList: true }); + } + } + + if (document.readyState === "loading") { + document.addEventListener("DOMContentLoaded", observeElements); + } else { + observeElements(); + } +})(); diff --git a/index.html b/index.html index 87ec8e3824..c96ae661e3 100644 --- a/index.html +++ b/index.html @@ -50,6 +50,7 @@ + -