Add an image to a scrolling block

21 hours ago, FluffCreativeStudio said:

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

#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;
}