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

RDCallis
Visitor
2 0 0

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

Reply 1 (1)

MRamzan
Shopify Partner
165 1 21

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

 

 

Hire Me:

WhatsApp: +91-9145985880
Email: mohdramzaan112@gmail.com
Skype: mohdramzaan112