ZulaikhaSalim Posted August 20 Posted August 20 (edited) Hi, I'm working on a new website that features two different marquees: A text marquee An image marquee I used this code for the image marquee, but it’s affecting both marquees. How can I adjust the code to only apply to the image marquee? <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <style> .m-scroll { display: flex; position: relative; width: 100%; height: 90px; margin: auto; overflow: hidden; z-index: 1; } .m-scroll__title { display: flex; position: absolute; top: 0; left: 0; align-items: center; justify-content: flex-start; width: 100%; height: 100%; white-space: nowrap; transition: all 0.7s ease; } .m-scroll__title > div { display: flex; animation: scrollText 20s infinite linear; } .m-scroll__title img { margin: 20px 20px 20px 20px; width: 200px; margin-bottom: 0 !important; } .m-scroll__title h1 { margin: 0; transition: all 1.4s ease; font-size: 0; } /*div:hover { animation-play-state: paused; }*/ @keyframes scrollText { from { transform: translateX(0%); } to { transform: translateX(-50%); } } </style> <script> const words = ['.', '.', '.'] const imgUrl = 'https://images.squarespace-cdn.com/content/v1/66b97a33c83afa6b192bb9ce/ad0bd778-64ab-4f62-9482-906f1532ccbb/marquee%40300x.png?format=1000w%22'; $(document).ready(() => { const textBlock = $('.sqs-block.marquee-block.sqs-block-marquee'); const htmlWords = ` <div class="m-scroll"> <div class="m-scroll__title"> <div> <h1> ${words.map((w) => `${w}<img width="20px" src="${imgUrl}"/>`).join('')} </h1> <h1> ${words.map((w) => `${w}<img width="20px" src="${imgUrl}"/>`).join('')} </h1> </div> </div> </div> `; $(htmlWords).insertAfter(textBlock); $(textBlock).remove(); }) </script> Edited August 20 by ZulaikhaSalim added website and screenshots
tuanphan Posted August 23 Posted August 23 Replace this with a marquee block ID Follow this to find ID Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment