How can I code a scrolling text-only marquee announcement bar?

[RDCallis]

Hello,

I'm having difficulty coding a marquee announcement bar. The static announcement bar code is below. When I've tried to add the marquee, both the background and the text scroll left. If possible, I'd like to have only the text scroll left.

URL: https://siriusnaturalpetfoods.com

(static) announcement-bar.liquid:

{% if section.settings.announcement_visibility %}
{% if section.settings.home_page_only == false or template.name == 'index' %}
<style>
.announcement {
font-size:{{ section.settings.announcement_text_size }}px;
background-color: {{ section.settings.announcement_bg_color }};
border-bottom: {{ section.settings.announcement_border_size}}px solid {{ section.settings.announcement_border_color }};
padding: {{ section.settings.announcement_padding}}px;
text-align: {{ section.settings.announcement_text_align }};
}
.announcement p {color: {{ section.settings.announcement_text_color }};}
.announcement a {text-decoration: underline;}
.announcement a:hover {text-decoration: none;}
</style>
<div class="announcement">{{ section.settings.announcement_text }}</div>
{% endif %}
{% endif %}
{% schema %}
{
"name": "Announcement Bar",
"settings": [
{
"type": "checkbox",
"id": "announcement_visibility",
"label": "Visibility (On / Off)",
"default": true
},
{
"type": "checkbox",
"id": "home_page_only",
"label": "Home page only",
"default": true
},
{
"type": "richtext",
"id": "announcement_text",
"label": "Text",
"default": "<p>Default <em>richtext</em> <a href=\"https://example.com/\">content</a></p>"
},
{
"type": "range",
"id": "announcement_text_size",
"min": 12,
"max": 24,
"step": 1,
"unit": "px",
"label": "Font size",
"default": 16
},
{
"type": "color",
"id": "announcement_text_color",
"label": "Text color",
"default": "#FFFFFF"
},
{
"type": "color",
"id": "announcement_bg_color",
"label": "Background color",
"default": "#094886"
},
{
"type": "range",
"id": "announcement_border_size",
"min": 0,
"max": 10,
"step": 1,
"unit": "px",
"label": "Border size",
"default": 4
},
{
"type": "color",
"id": "announcement_border_color",
"label": "Border color",
"default": "#094886"
},
{
"type": "range",
"id": "announcement_padding",
"min": 0,
"max": 20,
"step": 1,
"unit": "px",
"label": "Padding",
"default": 5
},
{
"type": "select",
"id": "announcement_text_align",
"label": "Text alignment",
"options": [
{ "value": "left", "label": "left"},
{ "value": "center", "label": "center"},
{ "value": "right", "label": "right"}
],
"default": "center"
}
]
}
{% endschema %}

[MRamzan]

You can try this code it will help you:

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

[RDCallis]

Thank you! Is it possible to modify this code so the text scrolls in the announcement bar instead?