From c3c20ab489f0065888d54b5bc51ce58881450110 Mon Sep 17 00:00:00 2001 From: "Danilo M." Date: Wed, 13 May 2026 09:40:13 +0200 Subject: feat: add glitch effect to article list page H1 Add .section-title class with chromatic-aberration glitch mechanics mirroring .hero-name. Extend hero-glitch.js to target both classes independently. Load glitch script on IsHome and IsSection pages. Title styled uppercase, centered, white. Co-Authored-By: Claude Sonnet 4.6 --- assets/js/hero-glitch.js | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) (limited to 'assets/js/hero-glitch.js') diff --git a/assets/js/hero-glitch.js b/assets/js/hero-glitch.js index 1b39b2f..94ba4a0 100644 --- a/assets/js/hero-glitch.js +++ b/assets/js/hero-glitch.js @@ -1,12 +1,14 @@ (function () { - var name = document.querySelector('.hero-name'); - if (!name) return; if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return; - function glitch() { - name.classList.add('is-glitching'); - setTimeout(function () { name.classList.remove('is-glitching'); }, 500); - setTimeout(glitch, 4000 + Math.random() * 7000); + function attachGlitch(el) { + function glitch() { + el.classList.add('is-glitching'); + setTimeout(function () { el.classList.remove('is-glitching'); }, 500); + setTimeout(glitch, 4000 + Math.random() * 7000); + } + setTimeout(glitch, 3500); } - setTimeout(glitch, 3500); + + document.querySelectorAll('.hero-name, .section-title').forEach(attachGlitch); })(); -- cgit v1.2.3