diff --git a/index.html b/index.html index 2a538c9..cdb2316 100644 --- a/index.html +++ b/index.html @@ -187,10 +187,18 @@ path: 'Background Grey Wave.json' }); - // Logo-Animation mit dynamischer Farbsteuerung - let _logoAnim = null; - let _lottieData = null; - let _yellowFills = null; + // Logo-Animation mit dynamischer Farbsteuerung via CSS-Override + // (CSS fill-Property schlägt SVG fill-Attribute per Spec) + let _logoAnim = lottie.loadAnimation({ + container: document.getElementById('lottie-logo'), + renderer: 'svg', + loop: true, + autoplay: true, + path: 'Fluid Loading Animation.json' + }); + + let _logoStyleEl = null; + let _yellowMarked = false; function _hslToHex(h, s, l) { s /= 100; l /= 100; @@ -203,38 +211,27 @@ return '#' + f(0) + f(8) + f(4); } - function _loadLogoAnim(data) { - const frame = _logoAnim ? Math.floor(_logoAnim.currentFrame) : 0; - if (_logoAnim) { _logoAnim.destroy(); _logoAnim = null; } - _logoAnim = lottie.loadAnimation({ - container: document.getElementById('lottie-logo'), - renderer: 'svg', - loop: true, - autoplay: true, - animationData: data + function _markYellowElements() { + const svg = document.querySelector('#lottie-logo svg'); + if (!svg) return false; + svg.querySelectorAll('[fill="rgb(255,223,0)"]').forEach(el => { + el.classList.add('logo-primary-fill'); }); - _logoAnim.goToAndPlay(frame, true); + return svg.querySelector('.logo-primary-fill') !== null; } function setLogoColor(hex) { - if (!_lottieData || !_yellowFills) return; - const r = parseInt(hex.slice(1, 3), 16) / 255; - const g = parseInt(hex.slice(3, 5), 16) / 255; - const b = parseInt(hex.slice(5, 7), 16) / 255; - _yellowFills.forEach(fill => { fill.c.k = [r, g, b, 1]; }); - _loadLogoAnim(_lottieData); + if (!_yellowMarked) { + _yellowMarked = _markYellowElements(); + if (!_yellowMarked) return; + } + if (!_logoStyleEl) { + _logoStyleEl = document.createElement('style'); + document.head.appendChild(_logoStyleEl); + } + _logoStyleEl.textContent = '#lottie-logo .logo-primary-fill { fill: ' + hex + '; }'; } - fetch('Fluid Loading Animation.json') - .then(r => r.json()) - .then(data => { - _lottieData = data; - const comp1 = data.assets.find(a => a.id === 'comp_1'); - const small4 = comp1.layers.find(l => l.nm === 'Small 4'); - _yellowFills = small4.shapes[0].it.filter(i => i.ty === 'fl'); - _loadLogoAnim(data); - }); - document.addEventListener('colorChanged', (e) => { const hex = _hslToHex(e.detail.h, e.detail.s, e.detail.l); setLogoColor(hex);