Add an image to a scrolling block

Hey there, 

I would love to add a small custom icon to a scrolling block. There are some scrolling widgets with image capabilities (will Myers and Elsfsight) but those are really for whole carousels of images. 

I really love the look of the Squarespace scroll with words - and just want to inject a tiny favicon instead of an emoji. 

Any coding geniuses out there have a suggestion for how to make this possible? Thank you!

@tuanphan thought you might have an idea?

I just helped a case this morning, use Squarespace Scrolling Block

If you share link to page where you use Scrolling Block + provide icon url, I will check & adjust code for your site.

Thank you so much @tuanphan I knew you would have the wisdom, that is exactly what I am trying to acomplish! 

The website is https://legally-fun.squarespace.com password is "fun" 

And here is a link to the image: https://ibb.co/3W2tWW6

Scrolling block is in the footer

@tuanphan you are a genius! Thanks so much for explaining your code. I was able to make a few adjustments and it is looking good except for one issue. 

It seems there is lag time before the infinite loop kicks in - so that the scroll has an empty tail for about half the page before it begins again. Do you have a suggestion for this? 

Thank you again! 

15 hours ago, FluffCreativeStudio said:

@tuanphan you are a genius! Thanks so much for explaining your code. I was able to make a few adjustments and it is looking good except for one issue. 

 

It seems there is lag time before the infinite loop kicks in - so that the scroll has an empty tail for about half the page before it begins again. Do you have a suggestion for this? 

 

Thank you again! 

You mean this space? it appears about 1 second then disappear 

On 6/6/2024 at 10:09 AM, tuanphan said:

#1. First, add text to 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. Explain a bit

Add text/image in this position. If you use 1 text only, you should repeat twice (same as code in screenshot).

if you use 3 different text, enter something like this

this is Text color

to increase Image width, you can add this code before </style>

.m-scroll__title img {
    width: 50px;
}

to align text/image after you added image size code, use this code before </style>

.m-scroll__title h1 {
    align-items: center;
}

Hello! 

wondering if you can tell me how to adjust the code to include multiple images in the scrolling block?

You could achieve this by adding a custom CSS code to your Squarespace site. First, upload the favicon image to your site, then use the :before or :after pseudo-elements in CSS to insert the image into the scrolling text block. Here's a quick example:

Replace your-scroll-class with the actual class of your scrolling block and your-favicon-url with the direct URL of your uploaded favicon. This should insert your custom icon into the scrolling text.

18 hours ago, KTaySlo said:

Hello! 

wondering if you can tell me how to adjust the code to include multiple images in the scrolling block?

Change code to something like this

<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','https://cdn.pixabay.com/photo/2023/08/07/19/47/water-lily-8175845_1280.jpg'];
$(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[0]}"/>`).join('')}
      </h1>
      <h1>
        ${words.map((w) => `${w}<img width="20px" src="${imgUrl[1]}"/>`).join('')}
      </h1>
    </div>
  </div>
</div>
    `;
    $(htmlWords).insertAfter(textBlock);
    $(textBlock).remove();
})
</script>

Hello @tuanphan

Thanks so much for sharing this code. I've got it working great, but I want to adjust the text to match my h1 text. In doing so it has vertically stretched the dimensions of my png image (it should look like the logo above) and positioned the words too high in the block.

Do you know how to fix that at all? I faffed with various bits but I can't find what controls that.

Site:

https://linthwaiteclough.squarespace.com/

Password: james

On 9/1/2024 at 4:48 PM, JoelleM said:

Hello @tuanphan

Thanks so much for sharing this code. I've got it working great, but I want to adjust the text to match my h1 text. In doing so it has vertically stretched the dimensions of my png image (it should look like the logo above) and positioned the words too high in the block.

Do you know how to fix that at all? I faffed with various bits but I can't find what controls that.

Site:

https://linthwaiteclough.squarespace.com/

Password: james

You can adjust this line

5 hours ago, tuanphan said:

You can adjust this line

Ah thanks @tuanphan, sorry I think i was unclear. I used that to adjust the font size which worked well, but it made the icon between the words stretch vertically, and made the text sit higher in the block. I wondered if I need to adjust sizing for that too?

On 9/3/2024 at 7:24 PM, JoelleM said:

Ah thanks @tuanphan, sorry I think i was unclear. I used that to adjust the font size which worked well, but it made the icon between the words stretch vertically, and made the text sit higher in the block. I wondered if I need to adjust sizing for that too?

To fix text sit higher, you can use this CSS code to Custom CSS box

.fe-block:has(.m-scroll) {
    display: flex;
}

To fix image, try remove this line from your code

@tuanphan that sorted it! Thank you soooo much 🙌

@tuanphanThank you very much for your code, its been so so helpful for adding multiple images. 

My only issue now that ive added the images is that the loop on the scroll isnt working. It seems its just restarting rather than going around in a loop as it usually does. How can I make the images (brand logo's) go in a loop smoothly? 

Thanks!!!

1 hour ago, Thatssojarring said:

@tuanphanThank you very much for your code, its been so so helpful for adding multiple images. 

My only issue now that ive added the images is that the loop on the scroll isnt working. It seems its just restarting rather than going around in a loop as it usually does. How can I make the images (brand logo's) go in a loop smoothly? 

 

Thanks!!!

Can you share link to page on your site?

@tuanphan yeah sure
www.posted-productions.com
pass: Hola

As you can see on the scroll, the images dont all show smoothly, some disappear then reappear and the transition isn't smooth on the scroll. The logo images suddenly restart rather than it being an ongoing scroll.

Thanks!

On 9/20/2024 at 10:59 AM, Thatssojarring said:

@tuanphan yeah sure
www.posted-productions.com
pass: Hola

As you can see on the scroll, the images dont all show smoothly, some disappear then reappear and the transition isn't smooth on the scroll. The logo images suddenly restart rather than it being an ongoing scroll.

Thanks!

If you intend to have logo autoscroll feature, you try this guide instead, here we will use Gallery Grid, instead of Scroll Block