Account Settings
FIRST NAME
[Loading...]
LAST NAME
[Loading...]
EMAIL
[Loading...]
ID
[Loading...] For support purposes only
Share AgencyGenius

Step 1: Add HTML, Css & JavaScript

Code
Html
Css
Javascript
Combined
 <!-- 
 Responsive Scrolling Marquee Widget 
 Features three rows of infinitely scrolling AI company logos: 
 - Top row: right to left 
 - Middle row: left to right 
 - Bottom row: right to left 
 Each icon is contained in a rounded glass-like container 
 --> 
 <div id="ai-scrolling-marquee-widget"> 
 <style> 
 /* Widget container styles */ 
 #ai-scrolling-marquee-widget { 
 width: 100%; 
 overflow: hidden; 
 position: relative; 
 font-family: sans-serif; 
 padding: 0; 
 margin: 0; 
 box-sizing: border-box; 
 } 
  
 /* Apply box-sizing to all elements */ 
 #ai-scrolling-marquee-widget * { 
 box-sizing: border-box; 
 } 
  
 /* Row container */ 
 .marquee-row { 
 width: 100%; 
 overflow: hidden; 
 position: relative; 
 padding: 1.5% 0; /* Percentage-based padding */ 
 } 
  
 /* Animation container */ 
 .marquee-content { 
 display: flex; 
 position: relative; 
 white-space: nowrap; 
 will-change: transform; 
 } 
  
 /* Item styling with responsive sizing */ 
 .marquee-item { 
 display: flex; 
 align-items: center; 
 justify-content: center; 
 flex-shrink: 0; 
 width: 8rem; /* Base size using rem */ 
 height: 8rem; /* Base size using rem */ 
 margin: 0 2rem; /* Responsive margins */ 
 padding: 0.8rem; 
 background-color: #f3f3f3; 
 border-radius: 10px; 
 position: relative; 
 transition: background-color 0.2s ease; 
 cursor: pointer; 
 } 
  
 /* Icon styling with corner radius added */ 
 .marquee-item img { 
 max-width: 70%; 
 max-height: 70%; 
 object-fit: contain; 
 transition: transform 0.3s ease; 
 border-radius: 10px; /* Added 10px corner radius to all images */ 
 } 
  
 /* Remove border-radius for specific logos */ 
 .marquee-item img.no-radius { 
 border-radius: 0; 
 } 
  
 /* Hover effects */ 
 .marquee-item { 
 transition: transform 0.3s ease; 
 } 
  
 .marquee-item:hover { 
 transform: scale(1.1); 
 background-color: #f3f3f3; 
 } 
  
 /* Animations */ 
 @keyframes scrollRight { 
 0% { 
 transform: translateX(0); 
 } 
 100% { 
 transform: translateX(-50%); /* Only move by exactly half the total width */ 
 } 
 } 
  
 @keyframes scrollLeft { 
 0% { 
 transform: translateX(-50%); /* Start from halfway */ 
 } 
 100% { 
 transform: translateX(0); /* Return to start */ 
 } 
 } 
  
 /* Animation assignments */ 
 .scroll-right-to-left .marquee-content { 
 animation: scrollRight 50s linear infinite; 
 } 
  
 .scroll-left-to-right .marquee-content { 
 animation: scrollLeft 50s linear infinite; 
 } 
  
 /* Responsive design with media queries */ 
 @media screen and (max-width: 1200px) { 
 .marquee-item { 
 width: 7rem; 
 height: 7rem; 
 margin: 0 1.5rem; 
 padding: 0.7rem; 
 } 
  
 .marquee-row { 
 padding: 1.2% 0; 
 } 
 } 
  
 @media screen and (max-width: 900px) { 
 .marquee-item { 
 width: 6rem; 
 height: 6rem; 
 margin: 0 1.2rem; 
 padding: 0.6rem; 
 } 
  
 /* Adjust spacing between rows */ 
 .scroll-left-to-right { 
 margin-top: 25px !important; 
 margin-bottom: 25px !important; 
 } 
 } 
  
 @media screen and (max-width: 600px) { 
 .marquee-item { 
 width: 4.5rem; 
 height: 4.5rem; 
 margin: 0 0.8rem; 
 padding: 0.5rem; 
 } 
  
 /* Adjust spacing between rows */ 
 .scroll-left-to-right { 
 margin-top: 15px !important; 
 margin-bottom: 15px !important; 
 } 
 } 
  
 @media screen and (max-width: 400px) { 
 .marquee-item { 
 width: 3.5rem; 
 height: 3.5rem; 
 margin: 0 0.6rem; 
 padding: 0.4rem; 
 } 
  
 /* Adjust spacing between rows */ 
 .scroll-left-to-right { 
 margin-top: 10px !important; 
 margin-bottom: 10px !important; 
 } 
 } 
 </style> 
  
 <!-- Top Row: Right to Left --> 
 <div class="marquee-row scroll-right-to-left" style="margin-top: 0; padding-top: 15px;"> 
 <div class="marquee-content"> 
 <!-- Original set of items - Row 1 --> 
 <div class="marquee-item"> 
 <img src="https://irp.cdn-website.com/a778beb9/dms3rep/multi/Anthropic_Symbol_1.png" alt="Anthropic" class="no-radius"> 
 </div> 
 <div class="marquee-item"> 
 <img src="https://irp.cdn-website.com/a778beb9/dms3rep/multi/gemini-icon-seeklogo.png" alt="Gemini"> 
 </div> 
 <div class="marquee-item"> 
 <img src="https://irp.cdn-website.com/a778beb9/dms3rep/multi/OpenAI_Symbol_1.png" alt="OpenAI"> 
 </div> 
 <div class="marquee-item"> 
 <img src="https://irp.cdn-website.com/a778beb9/dms3rep/multi/Descript_idUuG2vK6A_1.png" alt="Descript"> 
 </div> 
 <div class="marquee-item"> 
 <img src="https://irp.cdn-website.com/a778beb9/dms3rep/multi/Midjourney_idVDcXZyEx_0.png" alt="Midjourney"> 
 </div> 
 <div class="marquee-item"> 
 <img src="https://irp.cdn-website.com/a778beb9/dms3rep/multi/HeyGen_id-iUTO-bJ_0.png" alt="HeyGen"> 
 </div> 
 <div class="marquee-item"> 
 <img src="https://irp.cdn-website.com/a778beb9/dms3rep/multi/Jasper_idA3cdDJZy_1.png" alt="Jasper"> 
 </div> 
 <div class="marquee-item"> 
 <img src="https://irp.cdn-website.com/a778beb9/dms3rep/multi/XAI_Logo_1.png" alt="XAI" class="no-radius"> 
 </div> 
 <div class="marquee-item"> 
 <img src="https://irp.cdn-website.com/a778beb9/dms3rep/multi/relume.png" alt="Relume"> 
 </div> 
 <!-- The JS will duplicate these items to create a seamless loop --> 
 </div> 
 </div> 
  
 <!-- Middle Row: Left to Right --> 
 <div class="marquee-row scroll-left-to-right" style="margin-top: 40px; margin-bottom: 40px;"> 
 <div class="marquee-content"> 
 <!-- Original set of items - Row 2 --> 
 <div class="marquee-item"> 
 <img src="https://irp.cdn-website.com/a778beb9/dms3rep/multi/Microsoft_Symbol_1.png" alt="Microsoft"> 
 </div> 
 <div class="marquee-item"> 
 <img src="https://irp.cdn-website.com/a778beb9/dms3rep/multi/20250115094157577.webp" alt="AI Tool"> 
 </div> 
 <div class="marquee-item"> 
 <img src="https://irp.cdn-website.com/a778beb9/dms3rep/multi/55571654-d64c-4d4f-aee7-a516a5d9949e.png" alt="AI Tool"> 
 </div> 
 <div class="marquee-item"> 
 <img src="https://irp.cdn-website.com/a778beb9/dms3rep/multi/Youcom_new_logo.jpg" alt="YouCom"> 
 </div> 
 <div class="marquee-item"> 
 <img src="https://irp.cdn-website.com/a778beb9/dms3rep/multi/grok-logo-png_seeklogo-613403.png" alt="Grok"> 
 </div> 
 <div class="marquee-item"> 
 <img src="https://irp.cdn-website.com/a778beb9/dms3rep/multi/icon.png" alt="Ideogram"> 
 </div> 
 <div class="marquee-item"> 
 <img src="https://irp.cdn-website.com/a778beb9/dms3rep/multi/microsoft_copilot-logo_brandlogos.net_zaqzr.png" alt="Microsoft Copilot"> 
 </div> 
 <div class="marquee-item"> 
 <img src="https://irp.cdn-website.com/a778beb9/dms3rep/multi/Turquoise-2x.png" alt="Perplexity"> 
 </div> 
 <div class="marquee-item"> 
 <img src="https://irp.cdn-website.com/a778beb9/dms3rep/multi/Icon.jpeg" alt="Cursor"> 
 </div> 
 <!-- The JS will duplicate these items to create a seamless loop --> 
 </div> 
 </div> 
  
 <!-- Bottom Row: Right to Left --> 
 <div class="marquee-row scroll-right-to-left" style="margin-bottom: 0; padding-bottom: 15px;"> 
 <div class="marquee-content"> 
 <!-- Original set of items - Row 3 --> 
 <div class="marquee-item"> 
 <img src="https://irp.cdn-website.com/a778beb9/dms3rep/multi/idqtjv3DHH_1744635998795.jpeg" alt="Runway"> 
 </div> 
 <div class="marquee-item"> 
 <img src="https://irp.cdn-website.com/a778beb9/dms3rep/multi/Symbol-Indigo.png" alt="Synthesia"> 
 </div> 
 <div class="marquee-item"> 
 <img src="https://irp.cdn-website.com/a778beb9/dms3rep/multi/Icon+%281%29.jpeg" alt="Elecvan Labs"> 
 </div> 
 <div class="marquee-item"> 
 <img src="https://irp.cdn-website.com/a778beb9/dms3rep/multi/idKJeVvOlD_logos.jpeg" alt="Copy AI"> 
 </div> 
 <div class="marquee-item"> 
 <img src="https://irp.cdn-website.com/a778beb9/dms3rep/multi/Icon+%281%29.png" alt="Claude"> 
 </div> 
 <div class="marquee-item"> 
 <img src="https://irp.cdn-website.com/a778beb9/dms3rep/multi/idVEQi1YrH_logos.jpeg" alt="Murf AI"> 
 </div> 
 <div class="marquee-item"> 
 <img src="https://irp.cdn-website.com/a778beb9/dms3rep/multi/iduULOw34v_logos.png" alt="Pika"> 
 </div> 
 <div class="marquee-item"> 
 <img src="https://irp.cdn-website.com/a778beb9/dms3rep/multi/mistral-color.png" alt="Mistral AI"> 
 </div> 
 <!-- The JS will duplicate these items to create a seamless loop --> 
 </div> 
 </div> 
  
 <script> 
 // JavaScript for handling the infinite scrolling 
 document.addEventListener('DOMContentLoaded', function() { 
 // Function to ensure the marquee scrolls continuously 
 function setupMarquee() { 
 const rows = document.querySelectorAll('.marquee-row'); 
  
 // For each row, duplicate all items to create a truly infinite scroll 
 rows.forEach(row => { 
 const content = row.querySelector('.marquee-content'); 
 const items = content.querySelectorAll('.marquee-item'); 
  
 // Clone all items and append them to create a seamless loop 
 items.forEach(item => { 
 const clone = item.cloneNode(true); 
 content.appendChild(clone); 
 }); 
  
 // Set animation duration based on number of items (now doubled) 
 const totalItems = content.querySelectorAll('.marquee-item').length; 
 const duration = totalItems * 2.5; // 2.5 seconds per item for smooth scrolling 
 content.style.animationDuration = `${duration}s`; 
 }); 
  
 // Function to adjust animation speed based on screen width 
 function adjustAnimationSpeed() { 
 const width = window.innerWidth; 
 const rows = document.querySelectorAll('.marquee-content'); 
  
 rows.forEach(content => { 
 const currentDuration = parseFloat(content.style.animationDuration); 
 let speedFactor = 1; 
  
 // Adjust speed based on screen size 
 if (width < 600) { 
 speedFactor = 0.7; // Faster on smaller screens 
 } else if (width < 900) { 
 speedFactor = 0.8; 
 } else if (width < 1200) { 
 speedFactor = 0.9; 
 } 
  
 // Apply the adjusted speed 
 const baseItems = content.querySelectorAll('.marquee-item').length / 2; // Original count 
 const newDuration = baseItems * 2.5 * speedFactor; 
 content.style.animationDuration = `${newDuration}s`; 
 }); 
 } 
  
 // Initial adjustment 
 adjustAnimationSpeed(); 
  
 // Adjust on resize 
 window.addEventListener('resize', adjustAnimationSpeed); 
 } 
  
 // Run setup 
 setupMarquee(); 
 }); 
 </script> 
 </div> 
 <!-- End of Responsive Scrolling Marquee Widget --> 

 /* Widget container styles */ 
 #ai-scrolling-marquee-widget { 
 width: 100%; 
 overflow: hidden; 
 position: relative; 
 font-family: sans-serif; 
 padding: 0; 
 margin: 0; 
 box-sizing: border-box; 
 } 
  
 /* Apply box-sizing to all elements */ 
 #ai-scrolling-marquee-widget * { 
 box-sizing: border-box; 
 } 
  
 /* Row container */ 
 .marquee-row { 
 width: 100%; 
 overflow: hidden; 
 position: relative; 
 padding: 1.5% 0; /* Percentage-based padding */ 
 } 
  
 /* Animation container */ 
 .marquee-content { 
 display: flex; 
 position: relative; 
 white-space: nowrap; 
 will-change: transform; 
 } 
  
 /* Item styling with responsive sizing */ 
 .marquee-item { 
 display: flex; 
 align-items: center; 
 justify-content: center; 
 flex-shrink: 0; 
 width: 8rem; /* Base size using rem */ 
 height: 8rem; /* Base size using rem */ 
 margin: 0 2rem; /* Responsive margins */ 
 padding: 0.8rem; 
 background-color: #f3f3f3; 
 border-radius: 10px; 
 position: relative; 
 transition: background-color 0.2s ease; 
 cursor: pointer; 
 } 
  
 /* Icon styling with corner radius added */ 
 .marquee-item img { 
 max-width: 70%; 
 max-height: 70%; 
 object-fit: contain; 
 transition: transform 0.3s ease; 
 border-radius: 10px; /* Added 10px corner radius to all images */ 
 } 
  
 /* Remove border-radius for specific logos */ 
 .marquee-item img.no-radius { 
 border-radius: 0; 
 } 
  
 /* Hover effects */ 
 .marquee-item { 
 transition: transform 0.3s ease; 
 } 
  
 .marquee-item:hover { 
 transform: scale(1.1); 
 background-color: #f3f3f3; 
 } 
  
 /* Animations */ 
 @keyframes scrollRight { 
 0% { 
 transform: translateX(0); 
 } 
 100% { 
 transform: translateX(-50%); /* Only move by exactly half the total width */ 
 } 
 } 
  
 @keyframes scrollLeft { 
 0% { 
 transform: translateX(-50%); /* Start from halfway */ 
 } 
 100% { 
 transform: translateX(0); /* Return to start */ 
 } 
 } 
  
 /* Animation assignments */ 
 .scroll-right-to-left .marquee-content { 
 animation: scrollRight 50s linear infinite; 
 } 
  
 .scroll-left-to-right .marquee-content { 
 animation: scrollLeft 50s linear infinite; 
 } 
  
 /* Responsive design with media queries */ 
 @media screen and (max-width: 1200px) { 
 .marquee-item { 
 width: 7rem; 
 height: 7rem; 
 margin: 0 1.5rem; 
 padding: 0.7rem; 
 } 
  
 .marquee-row { 
 padding: 1.2% 0; 
 } 
 } 
  
 @media screen and (max-width: 900px) { 
 .marquee-item { 
 width: 6rem; 
 height: 6rem; 
 margin: 0 1.2rem; 
 padding: 0.6rem; 
 } 
  
 /* Adjust spacing between rows */ 
 .scroll-left-to-right { 
 margin-top: 25px !important; 
 margin-bottom: 25px !important; 
 } 
 } 
  
 @media screen and (max-width: 600px) { 
 .marquee-item { 
 width: 4.5rem; 
 height: 4.5rem; 
 margin: 0 0.8rem; 
 padding: 0.5rem; 
 } 
  
 /* Adjust spacing between rows */ 
 .scroll-left-to-right { 
 margin-top: 15px !important; 
 margin-bottom: 15px !important; 
 } 
 } 
  
 @media screen and (max-width: 400px) { 
 .marquee-item { 
 width: 3.5rem; 
 height: 3.5rem; 
 margin: 0 0.6rem; 
 padding: 0.4rem; 
 } 
  
 /* Adjust spacing between rows */ 
 .scroll-left-to-right { 
 margin-top: 10px !important; 
 margin-bottom: 10px !important; 
 } 
 } 

 // JavaScript for handling the infinite scrolling 
 document.addEventListener('DOMContentLoaded', function() { 
 // Function to ensure the marquee scrolls continuously 
 function setupMarquee() { 
 const rows = document.querySelectorAll('.marquee-row'); 
  
 // For each row, duplicate all items to create a truly infinite scroll 
 rows.forEach(row => { 
 const content = row.querySelector('.marquee-content'); 
 const items = content.querySelectorAll('.marquee-item'); 
  
 // Clone all items and append them to create a seamless loop 
 items.forEach(item => { 
 const clone = item.cloneNode(true); 
 content.appendChild(clone); 
 }); 
  
 // Set animation duration based on number of items (now doubled) 
 const totalItems = content.querySelectorAll('.marquee-item').length; 
 const duration = totalItems * 2.5; // 2.5 seconds per item for smooth scrolling 
 content.style.animationDuration = `${duration}s`; 
 }); 
  
 // Function to adjust animation speed based on screen width 
 function adjustAnimationSpeed() { 
 const width = window.innerWidth; 
 const rows = document.querySelectorAll('.marquee-content'); 
  
 rows.forEach(content => { 
 const currentDuration = parseFloat(content.style.animationDuration); 
 let speedFactor = 1; 
  
 // Adjust speed based on screen size 
 if (width < 600) { 
 speedFactor = 0.7; // Faster on smaller screens 
 } else if (width < 900) { 
 speedFactor = 0.8; 
 } else if (width < 1200) { 
 speedFactor = 0.9; 
 } 
  
 // Apply the adjusted speed 
 const baseItems = content.querySelectorAll('.marquee-item').length / 2; // Original count 
 const newDuration = baseItems * 2.5 * speedFactor; 
 content.style.animationDuration = `${newDuration}s`; 
 }); 
 } 
  
 // Initial adjustment 
 adjustAnimationSpeed(); 
  
 // Adjust on resize 
 window.addEventListener('resize', adjustAnimationSpeed); 
 } 
  
 // Run setup 
 setupMarquee(); 
 }); 

 <div id="snippet-mi0l7bmw"> 
 <!-- HTML SECTION START --> 
 <!-- 
 Responsive Scrolling Marquee Widget 
 Features three rows of infinitely scrolling AI company logos: 
 - Top row: right to left 
 - Middle row: left to right 
 - Bottom row: right to left 
 Each icon is contained in a rounded glass-like container 
 --> 
 <div id="ai-scrolling-marquee-widget"> 
 <style> 
 /* Widget container styles */ 
 #ai-scrolling-marquee-widget { 
 width: 100%; 
 overflow: hidden; 
 position: relative; 
 font-family: sans-serif; 
 padding: 0; 
 margin: 0; 
 box-sizing: border-box; 
 } 
  
 /* Apply box-sizing to all elements */ 
 #ai-scrolling-marquee-widget * { 
 box-sizing: border-box; 
 } 
  
 /* Row container */ 
 .marquee-row { 
 width: 100%; 
 overflow: hidden; 
 position: relative; 
 padding: 1.5% 0; /* Percentage-based padding */ 
 } 
  
 /* Animation container */ 
 .marquee-content { 
 display: flex; 
 position: relative; 
 white-space: nowrap; 
 will-change: transform; 
 } 
  
 /* Item styling with responsive sizing */ 
 .marquee-item { 
 display: flex; 
 align-items: center; 
 justify-content: center; 
 flex-shrink: 0; 
 width: 8rem; /* Base size using rem */ 
 height: 8rem; /* Base size using rem */ 
 margin: 0 2rem; /* Responsive margins */ 
 padding: 0.8rem; 
 background-color: #f3f3f3; 
 border-radius: 10px; 
 position: relative; 
 transition: background-color 0.2s ease; 
 cursor: pointer; 
 } 
  
 /* Icon styling with corner radius added */ 
 .marquee-item img { 
 max-width: 70%; 
 max-height: 70%; 
 object-fit: contain; 
 transition: transform 0.3s ease; 
 border-radius: 10px; /* Added 10px corner radius to all images */ 
 } 
  
 /* Remove border-radius for specific logos */ 
 .marquee-item img.no-radius { 
 border-radius: 0; 
 } 
  
 /* Hover effects */ 
 .marquee-item { 
 transition: transform 0.3s ease; 
 } 
  
 .marquee-item:hover { 
 transform: scale(1.1); 
 background-color: #f3f3f3; 
 } 
  
 /* Animations */ 
 @keyframes scrollRight { 
 0% { 
 transform: translateX(0); 
 } 
 100% { 
 transform: translateX(-50%); /* Only move by exactly half the total width */ 
 } 
 } 
  
 @keyframes scrollLeft { 
 0% { 
 transform: translateX(-50%); /* Start from halfway */ 
 } 
 100% { 
 transform: translateX(0); /* Return to start */ 
 } 
 } 
  
 /* Animation assignments */ 
 .scroll-right-to-left .marquee-content { 
 animation: scrollRight 50s linear infinite; 
 } 
  
 .scroll-left-to-right .marquee-content { 
 animation: scrollLeft 50s linear infinite; 
 } 
  
 /* Responsive design with media queries */ 
 @media screen and (max-width: 1200px) { 
 .marquee-item { 
 width: 7rem; 
 height: 7rem; 
 margin: 0 1.5rem; 
 padding: 0.7rem; 
 } 
  
 .marquee-row { 
 padding: 1.2% 0; 
 } 
 } 
  
 @media screen and (max-width: 900px) { 
 .marquee-item { 
 width: 6rem; 
 height: 6rem; 
 margin: 0 1.2rem; 
 padding: 0.6rem; 
 } 
  
 /* Adjust spacing between rows */ 
 .scroll-left-to-right { 
 margin-top: 25px !important; 
 margin-bottom: 25px !important; 
 } 
 } 
  
 @media screen and (max-width: 600px) { 
 .marquee-item { 
 width: 4.5rem; 
 height: 4.5rem; 
 margin: 0 0.8rem; 
 padding: 0.5rem; 
 } 
  
 /* Adjust spacing between rows */ 
 .scroll-left-to-right { 
 margin-top: 15px !important; 
 margin-bottom: 15px !important; 
 } 
 } 
  
 @media screen and (max-width: 400px) { 
 .marquee-item { 
 width: 3.5rem; 
 height: 3.5rem; 
 margin: 0 0.6rem; 
 padding: 0.4rem; 
 } 
  
 /* Adjust spacing between rows */ 
 .scroll-left-to-right { 
 margin-top: 10px !important; 
 margin-bottom: 10px !important; 
 } 
 } 
 </style> 
  
 <!-- Top Row: Right to Left --> 
 <div class="marquee-row scroll-right-to-left" style="margin-top: 0; padding-top: 15px;"> 
 <div class="marquee-content"> 
 <!-- Original set of items - Row 1 --> 
 <div class="marquee-item"> 
 <img src="https://irp.cdn-website.com/a778beb9/dms3rep/multi/Anthropic_Symbol_1.png" alt="Anthropic" class="no-radius"> 
 </div> 
 <div class="marquee-item"> 
 <img src="https://irp.cdn-website.com/a778beb9/dms3rep/multi/gemini-icon-seeklogo.png" alt="Gemini"> 
 </div> 
 <div class="marquee-item"> 
 <img src="https://irp.cdn-website.com/a778beb9/dms3rep/multi/OpenAI_Symbol_1.png" alt="OpenAI"> 
 </div> 
 <div class="marquee-item"> 
 <img src="https://irp.cdn-website.com/a778beb9/dms3rep/multi/Descript_idUuG2vK6A_1.png" alt="Descript"> 
 </div> 
 <div class="marquee-item"> 
 <img src="https://irp.cdn-website.com/a778beb9/dms3rep/multi/Midjourney_idVDcXZyEx_0.png" alt="Midjourney"> 
 </div> 
 <div class="marquee-item"> 
 <img src="https://irp.cdn-website.com/a778beb9/dms3rep/multi/HeyGen_id-iUTO-bJ_0.png" alt="HeyGen"> 
 </div> 
 <div class="marquee-item"> 
 <img src="https://irp.cdn-website.com/a778beb9/dms3rep/multi/Jasper_idA3cdDJZy_1.png" alt="Jasper"> 
 </div> 
 <div class="marquee-item"> 
 <img src="https://irp.cdn-website.com/a778beb9/dms3rep/multi/XAI_Logo_1.png" alt="XAI" class="no-radius"> 
 </div> 
 <div class="marquee-item"> 
 <img src="https://irp.cdn-website.com/a778beb9/dms3rep/multi/relume.png" alt="Relume"> 
 </div> 
 <!-- The JS will duplicate these items to create a seamless loop --> 
 </div> 
 </div> 
  
 <!-- Middle Row: Left to Right --> 
 <div class="marquee-row scroll-left-to-right" style="margin-top: 40px; margin-bottom: 40px;"> 
 <div class="marquee-content"> 
 <!-- Original set of items - Row 2 --> 
 <div class="marquee-item"> 
 <img src="https://irp.cdn-website.com/a778beb9/dms3rep/multi/Microsoft_Symbol_1.png" alt="Microsoft"> 
 </div> 
 <div class="marquee-item"> 
 <img src="https://irp.cdn-website.com/a778beb9/dms3rep/multi/20250115094157577.webp" alt="AI Tool"> 
 </div> 
 <div class="marquee-item"> 
 <img src="https://irp.cdn-website.com/a778beb9/dms3rep/multi/55571654-d64c-4d4f-aee7-a516a5d9949e.png" alt="AI Tool"> 
 </div> 
 <div class="marquee-item"> 
 <img src="https://irp.cdn-website.com/a778beb9/dms3rep/multi/Youcom_new_logo.jpg" alt="YouCom"> 
 </div> 
 <div class="marquee-item"> 
 <img src="https://irp.cdn-website.com/a778beb9/dms3rep/multi/grok-logo-png_seeklogo-613403.png" alt="Grok"> 
 </div> 
 <div class="marquee-item"> 
 <img src="https://irp.cdn-website.com/a778beb9/dms3rep/multi/icon.png" alt="Ideogram"> 
 </div> 
 <div class="marquee-item"> 
 <img src="https://irp.cdn-website.com/a778beb9/dms3rep/multi/microsoft_copilot-logo_brandlogos.net_zaqzr.png" alt="Microsoft Copilot"> 
 </div> 
 <div class="marquee-item"> 
 <img src="https://irp.cdn-website.com/a778beb9/dms3rep/multi/Turquoise-2x.png" alt="Perplexity"> 
 </div> 
 <div class="marquee-item"> 
 <img src="https://irp.cdn-website.com/a778beb9/dms3rep/multi/Icon.jpeg" alt="Cursor"> 
 </div> 
 <!-- The JS will duplicate these items to create a seamless loop --> 
 </div> 
 </div> 
  
 <!-- Bottom Row: Right to Left --> 
 <div class="marquee-row scroll-right-to-left" style="margin-bottom: 0; padding-bottom: 15px;"> 
 <div class="marquee-content"> 
 <!-- Original set of items - Row 3 --> 
 <div class="marquee-item"> 
 <img src="https://irp.cdn-website.com/a778beb9/dms3rep/multi/idqtjv3DHH_1744635998795.jpeg" alt="Runway"> 
 </div> 
 <div class="marquee-item"> 
 <img src="https://irp.cdn-website.com/a778beb9/dms3rep/multi/Symbol-Indigo.png" alt="Synthesia"> 
 </div> 
 <div class="marquee-item"> 
 <img src="https://irp.cdn-website.com/a778beb9/dms3rep/multi/Icon+%281%29.jpeg" alt="Elecvan Labs"> 
 </div> 
 <div class="marquee-item"> 
 <img src="https://irp.cdn-website.com/a778beb9/dms3rep/multi/idKJeVvOlD_logos.jpeg" alt="Copy AI"> 
 </div> 
 <div class="marquee-item"> 
 <img src="https://irp.cdn-website.com/a778beb9/dms3rep/multi/Icon+%281%29.png" alt="Claude"> 
 </div> 
 <div class="marquee-item"> 
 <img src="https://irp.cdn-website.com/a778beb9/dms3rep/multi/idVEQi1YrH_logos.jpeg" alt="Murf AI"> 
 </div> 
 <div class="marquee-item"> 
 <img src="https://irp.cdn-website.com/a778beb9/dms3rep/multi/iduULOw34v_logos.png" alt="Pika"> 
 </div> 
 <div class="marquee-item"> 
 <img src="https://irp.cdn-website.com/a778beb9/dms3rep/multi/mistral-color.png" alt="Mistral AI"> 
 </div> 
 <!-- The JS will duplicate these items to create a seamless loop --> 
 </div> 
 </div> 
  
 <script> 
 // JavaScript for handling the infinite scrolling 
 document.addEventListener('DOMContentLoaded', function() { 
 // Function to ensure the marquee scrolls continuously 
 function setupMarquee() { 
 const rows = document.querySelectorAll('.marquee-row'); 
  
 // For each row, duplicate all items to create a truly infinite scroll 
 rows.forEach(row => { 
 const content = row.querySelector('.marquee-content'); 
 const items = content.querySelectorAll('.marquee-item'); 
  
 // Clone all items and append them to create a seamless loop 
 items.forEach(item => { 
 const clone = item.cloneNode(true); 
 content.appendChild(clone); 
 }); 
  
 // Set animation duration based on number of items (now doubled) 
 const totalItems = content.querySelectorAll('.marquee-item').length; 
 const duration = totalItems * 2.5; // 2.5 seconds per item for smooth scrolling 
 content.style.animationDuration = `${duration}s`; 
 }); 
  
 // Function to adjust animation speed based on screen width 
 function adjustAnimationSpeed() { 
 const width = window.innerWidth; 
 const rows = document.querySelectorAll('.marquee-content'); 
  
 rows.forEach(content => { 
 const currentDuration = parseFloat(content.style.animationDuration); 
 let speedFactor = 1; 
  
 // Adjust speed based on screen size 
 if (width < 600) { 
 speedFactor = 0.7; // Faster on smaller screens 
 } else if (width < 900) { 
 speedFactor = 0.8; 
 } else if (width < 1200) { 
 speedFactor = 0.9; 
 } 
  
 // Apply the adjusted speed 
 const baseItems = content.querySelectorAll('.marquee-item').length / 2; // Original count 
 const newDuration = baseItems * 2.5 * speedFactor; 
 content.style.animationDuration = `${newDuration}s`; 
 }); 
 } 
  
 // Initial adjustment 
 adjustAnimationSpeed(); 
  
 // Adjust on resize 
 window.addEventListener('resize', adjustAnimationSpeed); 
 } 
  
 // Run setup 
 setupMarquee(); 
 }); 
 </script> 
 </div> 
 <!-- End of Responsive Scrolling Marquee Widget --> 
 <!-- HTML SECTION END --> 
  
 <!-- CSS SECTION START --> 
 <style> 
 /* Widget container styles */ 
 #ai-scrolling-marquee-widget { 
 width: 100%; 
 overflow: hidden; 
 position: relative; 
 font-family: sans-serif; 
 padding: 0; 
 margin: 0; 
 box-sizing: border-box; 
 } 
  
 /* Apply box-sizing to all elements */ 
 #ai-scrolling-marquee-widget * { 
 box-sizing: border-box; 
 } 
  
 /* Row container */ 
 .marquee-row { 
 width: 100%; 
 overflow: hidden; 
 position: relative; 
 padding: 1.5% 0; /* Percentage-based padding */ 
 } 
  
 /* Animation container */ 
 .marquee-content { 
 display: flex; 
 position: relative; 
 white-space: nowrap; 
 will-change: transform; 
 } 
  
 /* Item styling with responsive sizing */ 
 .marquee-item { 
 display: flex; 
 align-items: center; 
 justify-content: center; 
 flex-shrink: 0; 
 width: 8rem; /* Base size using rem */ 
 height: 8rem; /* Base size using rem */ 
 margin: 0 2rem; /* Responsive margins */ 
 padding: 0.8rem; 
 background-color: #f3f3f3; 
 border-radius: 10px; 
 position: relative; 
 transition: background-color 0.2s ease; 
 cursor: pointer; 
 } 
  
 /* Icon styling with corner radius added */ 
 .marquee-item img { 
 max-width: 70%; 
 max-height: 70%; 
 object-fit: contain; 
 transition: transform 0.3s ease; 
 border-radius: 10px; /* Added 10px corner radius to all images */ 
 } 
  
 /* Remove border-radius for specific logos */ 
 .marquee-item img.no-radius { 
 border-radius: 0; 
 } 
  
 /* Hover effects */ 
 .marquee-item { 
 transition: transform 0.3s ease; 
 } 
  
 .marquee-item:hover { 
 transform: scale(1.1); 
 background-color: #f3f3f3; 
 } 
  
 /* Animations */ 
 @keyframes scrollRight { 
 0% { 
 transform: translateX(0); 
 } 
 100% { 
 transform: translateX(-50%); /* Only move by exactly half the total width */ 
 } 
 } 
  
 @keyframes scrollLeft { 
 0% { 
 transform: translateX(-50%); /* Start from halfway */ 
 } 
 100% { 
 transform: translateX(0); /* Return to start */ 
 } 
 } 
  
 /* Animation assignments */ 
 .scroll-right-to-left .marquee-content { 
 animation: scrollRight 50s linear infinite; 
 } 
  
 .scroll-left-to-right .marquee-content { 
 animation: scrollLeft 50s linear infinite; 
 } 
  
 /* Responsive design with media queries */ 
 @media screen and (max-width: 1200px) { 
 .marquee-item { 
 width: 7rem; 
 height: 7rem; 
 margin: 0 1.5rem; 
 padding: 0.7rem; 
 } 
  
 .marquee-row { 
 padding: 1.2% 0; 
 } 
 } 
  
 @media screen and (max-width: 900px) { 
 .marquee-item { 
 width: 6rem; 
 height: 6rem; 
 margin: 0 1.2rem; 
 padding: 0.6rem; 
 } 
  
 /* Adjust spacing between rows */ 
 .scroll-left-to-right { 
 margin-top: 25px !important; 
 margin-bottom: 25px !important; 
 } 
 } 
  
 @media screen and (max-width: 600px) { 
 .marquee-item { 
 width: 4.5rem; 
 height: 4.5rem; 
 margin: 0 0.8rem; 
 padding: 0.5rem; 
 } 
  
 /* Adjust spacing between rows */ 
 .scroll-left-to-right { 
 margin-top: 15px !important; 
 margin-bottom: 15px !important; 
 } 
 } 
  
 @media screen and (max-width: 400px) { 
 .marquee-item { 
 width: 3.5rem; 
 height: 3.5rem; 
 margin: 0 0.6rem; 
 padding: 0.4rem; 
 } 
  
 /* Adjust spacing between rows */ 
 .scroll-left-to-right { 
 margin-top: 10px !important; 
 margin-bottom: 10px !important; 
 } 
 } 
 </style> 
 <!-- CSS SECTION END --> 
  
 <!-- JAVASCRIPT SECTION START --> 
 <script> 
 // JavaScript for handling the infinite scrolling 
 document.addEventListener('DOMContentLoaded', function() { 
 // Function to ensure the marquee scrolls continuously 
 function setupMarquee() { 
 const rows = document.querySelectorAll('.marquee-row'); 
  
 // For each row, duplicate all items to create a truly infinite scroll 
 rows.forEach(row => { 
 const content = row.querySelector('.marquee-content'); 
 const items = content.querySelectorAll('.marquee-item'); 
  
 // Clone all items and append them to create a seamless loop 
 items.forEach(item => { 
 const clone = item.cloneNode(true); 
 content.appendChild(clone); 
 }); 
  
 // Set animation duration based on number of items (now doubled) 
 const totalItems = content.querySelectorAll('.marquee-item').length; 
 const duration = totalItems * 2.5; // 2.5 seconds per item for smooth scrolling 
 content.style.animationDuration = `${duration}s`; 
 }); 
  
 // Function to adjust animation speed based on screen width 
 function adjustAnimationSpeed() { 
 const width = window.innerWidth; 
 const rows = document.querySelectorAll('.marquee-content'); 
  
 rows.forEach(content => { 
 const currentDuration = parseFloat(content.style.animationDuration); 
 let speedFactor = 1; 
  
 // Adjust speed based on screen size 
 if (width < 600) { 
 speedFactor = 0.7; // Faster on smaller screens 
 } else if (width < 900) { 
 speedFactor = 0.8; 
 } else if (width < 1200) { 
 speedFactor = 0.9; 
 } 
  
 // Apply the adjusted speed 
 const baseItems = content.querySelectorAll('.marquee-item').length / 2; // Original count 
 const newDuration = baseItems * 2.5 * speedFactor; 
 content.style.animationDuration = `${newDuration}s`; 
 }); 
 } 
  
 // Initial adjustment 
 adjustAnimationSpeed(); 
  
 // Adjust on resize 
 window.addEventListener('resize', adjustAnimationSpeed); 
 } 
  
 // Run setup 
 setupMarquee(); 
 }); 
 </script> 
 <!-- JAVASCRIPT SECTION END --> 
 </div>
Implementation

Responsive Scrolling Marquee Widget showcases infinitely scrolling logos in three alternating rows. Features glass-like containers for logos, smooth animations in different directions, automatic responsive scaling, and hover effects. The widget adapts seamlessly to any screen size with optimized animation speeds on mobile devices.

HTML Structure

Use the provided HTML structure:

  • Create a main container with ID ai-scrolling-marquee-widget
  • Each row needs a marquee-row class with either scroll-right-to-left or scroll-left-to-right for direction
  • Each row contains a marquee-content div that holds the scrolling items
  • Individual items use the marquee-item class with an image inside
  • Use the no-radius class on specific images to remove border-radius
CSS Styling

The CSS provides responsive layout and animation:

  • Items scale down proportionally on smaller screens using rem units instead of pixels
  • Animation keyframes control the infinite scrolling effect in both directions
  • Media queries adjust sizing at breakpoints of 1200px, 900px, 600px, and 400px
  • Hover effects add interactivity with scale transforms
  • Space between rows also adjusts on smaller screens
JavaScript Functionality

The JavaScript handles duplication of items for seamless scrolling and adjusts animation speed based on screen size:

  • On DOMContentLoaded , all row items are cloned to create a continuous loop
  • Animation duration is calculated based on the number of items
  • Responsive animation speeds adjust automatically when the window is resized
  • Smaller screens use faster animation speeds for better visual impact
Customization Tips
  • Adjust animation speed by changing the multiplier in totalItems * 2.5
  • Modify the speedFactor values to change how much the animation speeds up on smaller screens
  • Customize the glass-like containers by modifying the background-color and border-radius of marquee items
  • Adjust vertical spacing between rows by modifying the margin-top and margin-bottom values on the middle row
  • Add more rows or change directions for additional visual variety
Integration Tips

To use this marquee effectively on your site:

  • Replace the image URLs with your own logo paths
  • Adjust the number of items in each row based on your needs
  • The widget automatically adapts to container width, so place it in any responsive layout
  • For logos that should not have rounded corners, add the no-radius class to the image
  • Consider adding click functionality to the items if you want them to link to company websites
Browser Compatibility

This marquee widget is compatible with all modern browsers:

  • Uses standard CSS animations that work across Chrome, Firefox, Safari, and Edge
  • The will-change: transform property improves animation performance
  • JavaScript uses vanilla methods without requiring any libraries
  • Responsive design works on mobile devices including iOS and Android
Video Thumbnail

How to edit code using AI →

Resource Details:
The 3 Row Icon Scroller showcases infinitely scrolling logos in three alternating rows. Features glass-like containers for logos, smooth animations in different directions, automatic responsive scaling, and hover effects. The widget adapts seamlessly to any screen size with optimized animation speeds on mobile devices. Simple HTML/CSS/JS implementation with customizable animation speed, row spacing, and container styling.

Last Updated:

April 17th 2025

Category:

Marquees & Scrollers

Need Help?

Join Slack
Callum Wells
Callum Wells
i
Creator Credits
We always strive to credit creators as accurately as possible. While similar concepts might appear online, we aim to provide proper and respectful attribution.
A black padlock with a keyhole on a white background.

NO-ACCESS

Only for Desktop Users

This page is only available on desktop.

Please Log in on a desktop to gain access.