Über uns

/* Scoped Styles: beeinflusst nix außerhalb des Sliders */ .gataca-logo-slider{ --gap: 150px; /* Abstand zwischen Logos */ --logo-h: 100px; /* Standard-Logo-Höhe */ --fade: 48px; /* Fade links/rechts */ width: 100%; } .gataca-logo-slider__mask{ position: relative; overflow: hidden; width: 100%; /* leichte Ränder für Optik (optional) */ /* padding: 6px 0; */ /* pointer-events aktiv lassen, damit Hover/Pause geht */ } /* schönes Ausblenden links/rechts */ .gataca-logo-slider__mask::before, .gataca-logo-slider__mask::after{ content:""; position:absolute; top:0; bottom:0; width: var(--fade); z-index: 2; pointer-events:none; } .gataca-logo-slider__mask::before{ left:0; background: linear-gradient(to right, rgba(0,0,0,0.), rgba(0,0,0,0)); } .gataca-logo-slider__mask::after{ right:0; background: linear-gradient(to left, rgba(0,0,0,0.), rgba(0,0,0,0)); } .gataca-logo-slider__track{ display: flex; align-items: center; gap: var(--gap); width: max-content; /* wichtig für sauberes Messen */ will-change: transform; animation: gatacaLogoMarquee var(--duration, 180s) linear infinite; } .gataca-logo-slider__item{ flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; } .gataca-logo-slider__item img{ height: var(--logo-h); width: auto; max-width: 220px; object-fit: contain; display:block; /* gegen “milchige” PNGs auf dunklem BG: optional */ /* filter: drop-shadow(0 2px 8px rgba(0,0,0,.25)); */ } /* Pause bei Hover (nice für User) */ .gataca-logo-slider__mask:hover .gataca-logo-slider__track{ animation-play-state: paused; } /* Bewegung reduzieren, wenn Nutzer das so eingestellt hat */ @media (prefers-reduced-motion: reduce){ .gataca-logo-slider__track{ animation: none; } .gataca-logo-slider__mask{ overflow-x: auto; } } /* Animation: wir schieben exakt um die halbe Trackbreite (Set 1) */ @keyframes gatacaLogoMarquee{ from{ transform: translateX(0); } to{ transform: translateX(calc(-1 * var(--shift, 50%))); } } /* Responsive Tuning */ @media (max-width: 768px){ .gataca-logo-slider{ --gap: 24px; --logo-h: 34px; --fade: 30px; } .gataca-logo-slider__item img{ max-width: 170px; } } (function(){ // robust in Elementor/WordPress: mehrfaches Laden vermeiden const sliders = document.querySelectorAll('.gataca-logo-slider__track'); sliders.forEach(track => { if (track.dataset.inited === '1') return; track.dataset.inited = '1'; const mask = track.closest('.gataca-logo-slider__mask'); if (!mask) return; // Speed: px pro Sekunde (data-speed="2" -> 2px/s) const speed = Math.max(2, parseFloat(track.getAttribute('data-speed') || '2')); const compute = () => { // Track enthält Set1+Set2. Wir brauchen die Breite von Set1 = Hälfte der Gesamtbreite (bei sauberem Duplikat). // Sicherer: Gesamtbreite / 2. const total = track.scrollWidth; const half = total / 2; // shift in px setzen, damit die Keyframes exakt passen track.style.setProperty('--shift', half + 'px'); // Dauer = Strecke / speed const duration = half / speed; // Sekunden track.style.setProperty('--duration', duration.toFixed(2) + 's'); }; // beim Laden & bei Resize neu berechnen const onReady = () => compute(); if (document.readyState === 'complete' || document.readyState === 'interactive') onReady(); else document.addEventListener('DOMContentLoaded', onReady, { once: true }); // wenn Bilder nachladen, ändert sich Breite -> nachziehen const imgs = track.querySelectorAll('img'); let pending = imgs.length; if (pending === 0) compute(); imgs.forEach(img => { if (img.complete) { pending--; if (pending { pending--; if (pending { pending--; if (pending { if (rAF) cancelAnimationFrame(rAF); rAF = requestAnimationFrame(compute); }); }); })();