#1. First, add text to the Scrolling Block (you can add any text because we will use text to change this text then).
#2. Use this code to Page Header Code Injection (Page where you use Scrolling Block)
<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 40s infinite linear; } .m-scroll__title img { margin: 0 20px 6px; } .m-scroll__title h1 { margin: 0; font-size: 1.7rem; color: #000; transition: all 1.4s ease; display: flex; } /*div:hover { animation-play-state: paused; }*/ @keyframes scrollText { from { transform: translateX(0%); } to { transform: translateX(-50%); } } </style> <script> const words = ['WORK HARD PLAY HARD', 'WORK HARD PLAY HARD'] const imgUrl = 'https://i.ibb.co/TR6zRRj/Untitled-200-x-200-px.png'; $(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>
#3. Result
#4. Note
Add text/image in this position. If you use 1 text only, you should repeat twice (same as the code in the screenshot).
if you use 3 different text, enter something like this
this is the Text color