Jump to content

How to Apply Code to Only One Marquee on a Website?

Recommended Posts

Posted (edited)

Hi,

I'm working on a new website that features two different marquees:

  1. A text marquee
  2. 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>

 

Screenshot 2024-08-20 at 3.15.29 PM.png

Screenshot 2024-08-20 at 3.24.18 PM.png

Edited by ZulaikhaSalim
added website and screenshots
  • Replies 1
  • Views 950
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.