How do you make your Announcement bar a scrolling marquee???

[aliboulala]

Hey Guys,

Trying to figure out how to make my accouchement bar a scrolling marquee.

Great example of what I am trying to achieve is http://www.goodhoodstore.com

my current URL is skateshop-tester.myshopify.com

Any help would be HUGELY appreciated.

Thanks!

[aliboulala]

correction.  The announcement bar would not be scrolling, the text within the announcement bar would scroll left to right.

[Michael_Pink]

You only need wrap your content between the <marquee> and </marquee> tag
follow this documentation you will make by your self
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/marquee

[psd_llc]

@Michael_PinkThis is what comes up now to the link you included:

[kailasachse]

I used <marquee> tags and they seem fine.

Runs a little choppy on mobile, but not a huge deal.

[MRamzan]

Here is the video you can follow:

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