Logos
2026-02-18 05:47 Diff
https://www.attentive.com/component-library/logos

Name: Logos / Marquee / 16 logos

Options:

Logos - You can add or replace up to 16 logos (you can also hide them).

‍

In Head Tag

<style> /* CSS Keyframe Animation */ @keyframes translateX { to { transform: translateX(-100%); } } [data-css-marquee-list] { animation: translateX 40s linear; animation-iteration-count: infinite; animation-play-state: paused; } </style>

In Before Body Tag

<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script> <!-- GSAP Animation --> <script> window.addEventListener('load', () => { const timeline = gsap.timeline({ defaults: { delay:1, duration: 0.8, ease: "power1.inOut" } }); // Animate all hero layers with stagger timeline.fromTo(".food-bev__second-img", { y: -20, opacity: 0 }, { y: 0, opacity: 1, stagger: 2 }, "+=0.1" ); }); </script> <!-- Marquee --> <script> function initCSSMarquee() { const pixelsPerSecond = 50; // Set desired scroll speed (pixels per second) const marquees = document.querySelectorAll('[data-css-marquee]'); marquees.forEach(marquee => { // Remove any previously duplicated marquee lists (cleanup) marquee.querySelectorAll('.marquee-duplicate').forEach(el => el.remove()); marquee.querySelectorAll('[data-css-marquee-list]').forEach(list => { // Duplicate the list for seamless looping const duplicate = list.cloneNode(true); duplicate.classList.add('marquee-duplicate'); marquee.appendChild(duplicate); }); }); const observer = new IntersectionObserver(entries => { entries.forEach(entry => { entry.target.querySelectorAll('[data-css-marquee-list]').forEach(list => { list.style.animationPlayState = entry.isIntersecting ? 'running' : 'paused'; }); entry.target.querySelectorAll('.marquee-duplicate').forEach(list => { list.style.animationPlayState = entry.isIntersecting ? 'running' : 'paused'; }); }); }, { threshold: 0 }); marquees.forEach(marquee => { // Recalculate duration using total width const totalWidth = Array.from(marquee.querySelectorAll('[data-css-marquee-list], .marquee-duplicate')) .reduce((sum, el) => sum + el.offsetWidth, 0); const duration = totalWidth / pixelsPerSecond; marquee.querySelectorAll('[data-css-marquee-list], .marquee-duplicate').forEach(list => { list.style.animationDuration = duration + 's'; list.style.animationPlayState = 'paused'; }); observer.observe(marquee); }); } // Wait until all resources (images/fonts) are loaded for correct width calculation window.addEventListener('load', function() { initCSSMarquee(); }); // Also rerun when window is resized (for responsiveness) window.addEventListener('resize', function() { initCSSMarquee(); }); </script>