Looking to add images to a scrolling marquee

Hi,

I'm looking to add images (with borders) to scrolling marquee like this screenshot below! 

Very grateful for any assistance!

Can you share link to page where you use Scroll Block? We can check easier

I used to solved a similar case, but require a Business Plan or higher

@tuanphan Hi Tuan, 

Sorry for the delay - I didn't see your response! I have quickly created a scroll back as an example here.

Password: Caleb9191!

Thanks for your help 😀

Password is incorrect

2 hours ago, tuanphan said:

Password is incorrect

 

Apologies - if you try it again now, it should work 🙂

hey @tuanphan and @luciedemaid were you ever able to figure out a solution to this?  I'm looking for the same 🙂

On 1/1/2024 at 12:40 PM, DevonHarris said:

hey @tuanphan and @luciedemaid were you ever able to figure out a solution to this?  I'm looking for the same 🙂

Like this?

https://tuanphan.squarespace.com/scroll-block-image?noredirect

pass: abc

Use Scrolling Block with no text

Use this code to Page Header

<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: 0 20px 6px;
           width: 350px;
    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://tuanphan.squarespace.com/s/SPEND-THEN-logo.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>

Change image here

If add multi images, change some lines

const imgUrl = ['https://cdn.pixabay.com/photo/2023/12/14/20/24/christmas-balls-8449616_1280.jpg','https://cdn.pixabay.com/photo/2023/11/03/17/41/hummingbird-hawk-moth-8363573_1280.jpg'];

and

<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>

hey @tuanphan very similar but I was hoping to space the items evenly, I tried changing the item to have a background image, but the image then stays absolute rather than moving with the text 😞

So far this is the code that I used, without luck.  I have successfully ID'd the 'even' element, but the image remains absolute.  When position is changed to 'relative' or 'static', the image disappears off the page

.Marquee *:nth-of-type(even) {
  color: transparent;
background-image:url(https://static1.squarespace.com/static/5fd5fd7bc704802ff553283e/t/657a0322eb49b744657bc1f5/1702495010530/website-design-new-york-breakpoint-branding-globe-icon.png);
 background-size:contain;
 background-repeat:no-repeat;
}

The only other solution I can think of is using Chris Schwartz-Edmisten's scrolling logo plugin and insert images, then use the :nth-of-type(even) to toggle the item title on and off. 

On 1/2/2024 at 10:37 PM, DevonHarris said:

So far this is the code that I used, without luck.  I have successfully ID'd the 'even' element, but the image remains absolute.  When position is changed to 'relative' or 'static', the image disappears off the page

.Marquee *:nth-of-type(even) {
  color: transparent;
background-image:url(https://static1.squarespace.com/static/5fd5fd7bc704802ff553283e/t/657a0322eb49b744657bc1f5/1702495010530/website-design-new-york-breakpoint-branding-globe-icon.png);
 background-size:contain;
 background-repeat:no-repeat;
}

 

The only other solution I can think of is using Chris Schwartz-Edmisten's scrolling logo plugin and insert images, then use the :nth-of-type(even) to toggle the item title on and off. 

Can you share link to your site?

sure but it's not live yet.  Password: Watson 

On 1/10/2024 at 2:04 AM, DevonHarris said:

sure but it's not live yet.  Password: Watson 

Space seems fine to me

hey @tuanphan I'm trying to add the globe where the text is pink (and remove the pink text)- I have effectively targeted "every other" and colored it pink, now I just want to replace the text with the globe icon and make it scroll...Any ideas?

On 1/10/2024 at 10:12 PM, tuanphan said:

Space seems fine to me

hey @tuanphan I was wondering if you were ever able to find a fix for this?  The globe image should be moving (and in place of) all the pink text.  I tried targeting 'even' content items within the marquee block, and changing the text to transparent and adding a background image, but that just forces the globe image to stay, wheras I would like it to scroll with the text.  hoping you might have a good solution!

Hey  @tuanphan

This code you share originally is perfect, is there a way to also display the scrolling text with the scrolling images in your code? I've been trying to figure this out for months and you have it down perfectly.

On 8/11/2024 at 9:46 PM, KevinWalton said:

Hey  @tuanphan

This code you share originally is perfect, is there a way to also display the scrolling text with the scrolling images in your code? I've been trying to figure this out for months and you have it down perfectly.

You can replace dot symbol with real text