marquee announcement bar infinite scroll bar / sliding bar

[luxsupplyau]

my theme doesn't support a marquee animated announcement bar. i've also had a look at numerous other discussion posts and attempted to add, delete or replace code in the announcement-bar.liquid file. none of them have worked, and work to avail. 

my shopify url: https://lux-supply.com.au/
the theme is called uneox.

an example of what i want to replicate but with different phrases - https://fdhsneakers.com/ 

i had a previous set of code that was attached however, the text would flicker once the phrases reach a certain point in the announcement bar. i do no want this, and would like it to be an infinite scrolling type text animation where it transitions to off screen then back on screen. 

the code that was previously attached:

<style>
.hd-AnnouncementBar{max-height:40px;width:100vw;background-color:#000;overflow:hidden;transition:max-height .3s ease}.hd-Banner-fixed .hd-AnnouncementBar{max-height:0}.hd-AnnouncementBar_Ticker{display:flex;padding-top:6px;padding-bottom:7px;font-size:10px;font-weight:400;letter-spacing:.3px;line-height:12px;text-transform:uppercase;background-color:#000;color:#fff}@media only screen and (min-width: 768px){.hd-AnnouncementBar_Ticker{width:200vw}}.hd-AnnouncementBar_Items{flex:1 1 100%;display:flex;animation:Ticker var(--Animation_Duration, 15s) infinite linear}.hd-AnnouncementBar:hover .hd-AnnouncementBar_Items{animation-play-state:paused}.hd-AnnouncementBar_Item{align-items:center;flex:1 1 10%;display:flex;padding-right:50px;text-align:center}@media only screen and (min-width: 768px){.hd-AnnouncementBar_Item{padding-right:0}}.hd-AnnouncementBar_Text{white-space:nowrap;overflow:hidden}@keyframes Ticker{to{transform:translate(-100%)}}
</style>
<div class="hd-AnnouncementBar">
<announcement-ticker class="hd-AnnouncementBar_Ticker" style="--Animation_Duration: 21s;">
<div class="hd-AnnouncementBar_Items">
<div class="hd-AnnouncementBar_Item"><p class="hd-AnnouncementBar_Text">e.g. free shipping </p></div>
</div>

<div class="hd-AnnouncementBar_Items">
<div class="hd-AnnouncementBar_Item"><p class="hd-AnnouncementBar_Text">sale on now </p></div>
</div>

<div class="hd-AnnouncementBar_Items">
<div class="hd-AnnouncementBar_Item"><p class="hd-AnnouncementBar_Text">authenticity guarantee</p></div>
</div>


</announcement-ticker>
</div>

[Wish-It]

Would be happy to help, you can checkout our app where you can create this requirement as task and we will do it for you. The first task is free.

[PaulNewton]

UX Caveat: Always a/b test things like this and be aware of accessibility prefers-reduced-motion preferences. Moreso when a sites frontpage already has a ton of UI noise all competing for the customers visual attention.

Marquees can be an anti-pattern there is a reason they were removed completely from html just like the <blink> tag. Read increase bounce rates and decrease conversions.

 With UI changes like this when looking at discussions pay attention to the low amount of time professionals contribute to it or their lack of shared live samples vs the number of merchants doing it because they saw another site doing but have no real data or logic backing a desire to add it to a page and the complete lack of follow up that it increased conversions or other metrics.

It's the same problem as slideshows trying to cram more into limited real estate hoping something from of a set of things stands out in relevance instead of properly prioritizing single high value messaging that's been vetted to stand alone like a hero image. Then theirs the performance impact of having animations right out the gate at the very top of a page.

An indication this can be an annoying anti-pattern for a business customers is if it does not already have developers on hand to both create the change and vet it through a/b testing.

If despite warnings you still want to try and fix this:

---

@luxsupplyau wrote:

 however, the text would flicker once the phrases reach a certain point in the announcement bar.

---

This is typically because the animations are not overlapping properly and abruptly ending or related javascript isn't pre-emptively duplicating elements before deletion and all types of other reasones, etc.

A common fix is to just duplicate all the text related elements so the scroll width is technically bigger than the page being viewed but hidden offpage. Or faking the duplication of text by using CSS text shadows with very large horizontal offsets. Alternatively using a mid way cross-fade transition to hide any flicker from the scroll resetting to origin.

Example implementations

https://stackoverflow.com/questions/48970344/css-wrapping-marquee 

https://ryanmulligan.dev/blog/css-marquee/ 

https://www.google.com/search?q=CSS+only+marquee+wrap+around 

[Wish-It]

Hi, I got an invite from you but it seems to be cancelled or expired. Let me know if you would like me to show the implementation on a demo site?

[luxsupplyau]

A video or demonstration how to input the code would be greatly appreciated. Thank you

[vshowboy8]

<div class="ticker-wrap">
<div
class="ticker"
{% if section.settings.pause_on_hover %}
onmouseover="this.stop();" onmouseout="this.start();"
{% endif %}
>
{%- for block in section.blocks -%}
<div
class="ticker__item"
>
{{ block.settings.message }}
</div>
{%- endfor -%}
</div>
</div>

<style>
@keyframes ticker {
0% {
transform: translate3d(0, 0, 0);
visibility: visible;
}

100% {
transform: translate3d(-100%, 0, 0);

}
}

.ticker-wrap {
overflow:hidden;
bottom: 0;
width: 100%;
height: auto;
background-color: rgba(#000, 0.9);
padding-left: 100%;
box-sizing: content-box;

}
.ticker {

display: inline-block;
height: auto;
line-height: 4rem;
white-space: nowrap;
padding-right: 100%;
box-sizing: content-box;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-name: ticker;
animation-duration: 15s;

}
.ticker__item {
display: inline-block;
padding: 2rem 2rem;
color:black;
font-size: 48px;
font-family: 'Skyscapers';
}
</style>

{% schema %}
{
"name": "Marquee",
"settings": [
{
"type": "checkbox",
"id": "show_marquee_bar",
"label": "Show"
},
{
"type": "select",
"id": "direction",
"options": [
{
"value": "left",
"label": "Right to Left"
},
{
"value": "right",
"label": "Left to Right"
}
],
"default": "right",
"label": "Direction"
},
{
"type": "checkbox",
"id": "pause_on_hover",
"label": "Pause on hover"
},
{
"type": "text",
"id": "speed",
"label": "Speed",
"default": "15"
}
],
"blocks": [
{
"type": "header",
"name": "Marquee Text",
"settings": [
{
"id": "message",
"type": "textarea",
"label": "Message"
},
{
"type": "color",
"id": "colorBackground",
"label": "Background color",
"default": "#ffffff"
},
{
"type": "color",
"id": "colorText",
"label": "Text color",
"default": "#000"
}
]
}
],
"presets": [
{
"name": "Marquee hr"
}
]
}
{% endschema %}

[MRamzan]

You can try this code:

Create a new section marquee and paste below code.

You can add marquee section to any page.

<style>
  .section-{{ section.id }}.custom-marquee {
    display: flex;
    align-items: center;
    height: {{section.settings.marquee_height}}px;
    width: 100vw;
    max-width: 100%;
    overflow-x: hidden;
    background:{{section.settings.colorBackground}}; 
    color:{{section.settings.colorText}}; 
  }
  .section-{{ section.id }}.custom-marquee a {
    color:{{section.settings.colorText}}; 
    text-decoration: none;
  }
  .section-{{ section.id }}.custom-marquee .track {
    display: flex;
    align-items: center;
    white-space: nowrap;
    will-change: transform;
    animation: marquee 12s linear infinite;
  }
  .section-{{ section.id }}.custom-marquee .content {
    margin-left: 40px;
    font-size: {{section.settings.font_size}}px;
  }
  @keyframes marquee {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-20%);
    }
  }
</style>
  <div class="section-{{ section.id }} custom-marquee " role="region" {{ block.shopify_attributes }}>
      {%- if section.settings.link != blank -%}
        <a href="{{ section.settings.link }}" class="">
      {%- endif -%}
          <div class="track ">
            {%- for block in section.blocks -%}
            <span class="content marquee-text">{{ block.settings.new_text | escape }}</span>
            {%- endfor -%}
            {%- for block in section.blocks -%}
              <span class="content marquee-text">{{ block.settings.new_text | escape }}</span>
            {%- endfor -%}
            {%- for block in section.blocks -%}
              <span class="content marquee-text">{{ block.settings.new_text | escape }}</span>
            {%- endfor -%}
            {%- for block in section.blocks -%}
              <span class="content marquee-text">{{ block.settings.new_text | escape }}</span>
            {%- endfor -%}
            {%- for block in section.blocks -%}
              <span class="content marquee-text">{{ block.settings.new_text | escape }}</span>
            {%- endfor -%}
            {%- for block in section.blocks -%}
              <span class="content marquee-text">{{ block.settings.new_text | escape }}</span>
            {%- endfor -%}
            {%- for block in section.blocks -%}
              <span class="content marquee-text">{{ block.settings.new_text | escape }}</span>
            {%- endfor -%}
            {%- for block in section.blocks -%}
              <span class="content marquee-text">{{ block.settings.new_text | escape }}</span>
            {%- endfor -%}
            {%- for block in section.blocks -%}
              <span class="content marquee-text">{{ block.settings.new_text | escape }}</span>
            {%- endfor -%}
            {%- for block in section.blocks -%}
              <span class="content marquee-text">{{ block.settings.new_text | escape }}</span>
            {%- endfor -%}
            {%- if section.settings.link != blank -%}
              {% render 'icon-arrow' %}
            {%- endif -%}
          </div>
          {%- if section.settings.link != blank -%}
        </a>
    {%- endif -%}
  </div>
{% schema %}
{
  "name": "Marquee Text",
  "settings": [
    {
      "type": "color",
      "id": "colorBackground",
      "label": "Background color",
      "default": "#000"
    },
    {
      "type": "color",
      "id": "colorText",
      "label": "Text color",
      "default": "#fff"
    },
    {
      "type": "url",
      "id": "link",
      "label": "Link"
    },
    {
      "type": "range",
      "id": "marquee_height",
      "min": 24,
      "max": 200,
      "step": 2,
      "default": 46,
      "label": "Marquee height"
    },
    {
      "type": "range",
      "id": "font_size",
      "min": 8,
      "max": 100,
      "step": 2,
      "default": 24,
      "label": "Font size"
    }
  ],
    "blocks": [
    {
      "type": "text",
      "name": "Text",
      "limit": 20,
      "settings": [
         {
          "type": "text",
          "id": "new_text",
          "default": "Welcome to store",
          "label": "Text"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Marquee",
      "blocks": [
        {
          "type": "text"
        },
        {
          "type": "text"
        },
        {
          "type": "text"
        }
      ]
    }
  ]
}
{% endschema %}