Custom Infinite marquee (Announcement-bar) issue

Technical Q&A
1

Hi everyone,

I’m struggling to put on my Impulse theme an ad bar that scrolls infinitely like on this website :

https://luxsupply.com.au/

my HTML structure isn’t good, but I’m having a really hard time finding a solution to render it cleanly and well (for example, here, one sentence goes faster than the others and the scrolling jumps back to the beginning) Anyway, I hope you’ve understood my problem, thank you.

{%- assign show_announcement = false -%}
{%- assign announcement_block_count = 0 -%}
{%- for block in section.blocks -%}
  {%- if block.type == 'announcement' -%}
    {%- assign show_announcement = true -%}
    {%- assign announcement_block_count = announcement_block_count | plus: 1 -%}
  {%- endif -%}
{%- endfor -%}

{% if show_announcement %}
<div class="fab-marquee">
  <div class="fab-marquee-inner">
    <div class="fab-marquee-content">
      <div class="announcement-phase">
        <p>? Test</p>
      </div>
      <div class="announcement-phase">
        <p>? Test</p>
      </div>
      <div class="announcement-phase">
        <p>? Teste</p>
      </div>
      <div class="announcement-phase">
        <p>? Test</p>
      </div>
    </div>
  </div>
</div>

{% style %}
.fab-marquee {
  overflow: hidden;
  position: sticky;
  top: 0px;
  z-index: 999;
}

.fab-marquee-inner {
  width: 100%;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  user-select: none;
  background: rgb(238, 246, 233);
  border-top: 1px solid rgba(238, 246, 233, 0);
  border-bottom: 1px solid rgba(238, 246, 233, 0);
  padding: 14px 0px;
  display: flex;
}

.fab-marquee-content {
  display: flex;
}

.announcement-phase {
  line-height: 1;
  display: inline-block;
  padding-left: 15px;
  padding-right: 15px;
  font-family: Arial;
  font-weight: 200;
  color: #000000;
  font-size: 15px;
  text-transform: uppercase;
  animation: marquee-animation 10s linear infinite;
}

@keyframes marquee-animation {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

a {
  text-decoration: underline;
  color: #000000;
}

a:hover {
  color: #000000;
}
{% endstyle %}
{% endif %}
2

Hey @Suprmiles ,

Can you share the link to your preview store and the password (if any). Please make sure these changes are added there so I can take a look.