Vereinshistorie-Seite: kompakter Hero, interaktive Museums-Timeline (Scroll-Reveal, Jahres-Sprungnav), Originalbilder unverändert

routes.php enthält auch die fussball-Route (User-WIP, Seite existiert) Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
2026-06-11 22:50:15 +02:00
parent 1ee08b932d
commit efa47d4f60
13 changed files with 368 additions and 4 deletions
--- a/public/assets/js/timeline.js
+++ b/public/assets/js/timeline.js
@@ -0,0 +1,52 @@
+/* Timeline: Scroll-Reveal der Stationen + aktive Jahres-Navigation.
+   Progressive Enhancement — ohne JS ist alles sichtbar (js-reveal-Scope). */
+(function () {
+    'use strict';
+
+    var section = document.querySelector('[data-timeline]');
+    if (!section) {
+        return;
+    }
+
+    var events = section.querySelectorAll('.timeline__event');
+    var navLinks = section.querySelectorAll('.timeline-nav a');
+
+    if (!('IntersectionObserver' in window)) {
+        return;
+    }
+
+    section.classList.add('js-reveal');
+
+    var reveal = new IntersectionObserver(function (entries) {
+        entries.forEach(function (entry) {
+            if (entry.isIntersecting) {
+                entry.target.classList.add('is-visible');
+                reveal.unobserve(entry.target);
+            }
+        });
+    }, { threshold: 0.15, rootMargin: '0px 0px -8% 0px' });
+
+    // Aktives Jahr in der Sprung-Navigation markieren.
+    var spy = new IntersectionObserver(function (entries) {
+        entries.forEach(function (entry) {
+            if (!entry.isIntersecting) {
+                return;
+            }
+            var target = '#' + entry.target.getAttribute('data-nav');
+            navLinks.forEach(function (link) {
+                var active = link.getAttribute('href') === target;
+                link.classList.toggle('is-active', active);
+                if (active) {
+                    link.setAttribute('aria-current', 'true');
+                } else {
+                    link.removeAttribute('aria-current');
+                }
+            });
+        });
+    }, { rootMargin: '-35% 0px -55% 0px' });
+
+    events.forEach(function (event) {
+        reveal.observe(event);
+        spy.observe(event);
+    });
+})();