Jump to content

Looking to add images to a scrolling marquee

Recommended Posts

  • Replies 13
  • Views 2.2k
  • Created
  • Last Reply

Top Posters In This Topic

  • 2 weeks later...
  • 7 months later...
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

image.png.a3bc4c196820a31c540f181e9bd40ff9.png

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>

image.png.472f1e7f66fcc34d090cf03a45790c89.png

Change image here

image.thumb.png.f14f477c196c8a2ac4de31c353b9d276.png

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>

 

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

Link to comment

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. 

Edited by DevonHarris
Link to comment
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?

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

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

Space seems fine to me

image.thumb.png.e28d6566a1aa0fdd1ba60eafbb49d8d4.png

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!

Link to comment

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.