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);