Scrolling Marquee / Ticker Announcement Bar

[Toptoys2uHS]

Hello All,

I have managed to add a Marquee/Ticker onto the top of this webpage as a testing ground, however any text that is too long seems to get cut off when the overflow resets and does not display properly. 

I have also tried to add a link on to each of the individual texts and decrease the gap between each announcement, but have had no luck.

Would anyone be able to implement these functions?

The code can be found here and is inserted into announcement-bar.liquid

    {% if collection.handle == "onbuy-imports" %}
    <style>
.announcement-bar{max-height:43px;width:100vw;background-color:#3b95f0;overflow:hidden;transition:max-height .3s ease}.hd-Banner-fixed .announcement-bar{max-height:0}.announcement-bar_Ticker{display:flex;padding-top:12px;padding-bottom:12px;font-size:15px;font-weight:bold;letter-spacing:.3px;line-height:12px;text-transform:uppercase;background-color:#3b95f0;color:#fff}@media only screen and (min-width: 768px){.announcement-bar_Ticker{width:200vw}}.announcement-bar_Items{flex:1 1 100%;display:flex;animation:Ticker var(--Animation_Duration, 15s) infinite linear}.announcement-bar:hover .announcement-bar_Items{animation-play-state:paused}.announcement-bar_Item{align-items:center;flex:1 1 10%;display:flex;padding-right:50px;text-align:center}@media only screen and (min-width: 768px){.announcement-bar_Item{padding-right:0}}.announcement-bar_Text{white-space:nowrap;overflow:hidden}@keyframes Ticker{to{transform:translate(-100%)}}
</style>
<div class="announcement-bar">
<announcement-ticker class="announcement-bar_Ticker" style="--Animation_Duration: 8s;">
<div class="announcement-bar_Items">
<div class="announcement-bar_Item"><p class="announcement-bar_Text"> Order by 3pm on 21st December for GUARANTEED Christmas Delivery and Choose Parcelforce Next Day at Checkout!
</p></div>
</div>

<div class="announcement-bar_Items">
<div class="announcement-bar_Item"><p class="announcement-bar_Text">Free Standard UK Delivery on orders over £15</p></div>
</div>


</announcement-ticker>
</div>
  {% endif %}

The page to see this in action can be found here: https://toptoys2u.co.uk/collections/onbuy-imports

Any help is highly appreciated!

[BSS-Commerce]

Hi @Toptoys2uHS ,
Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.

[Toptoys2uHS]

Hello @BSS-Commerce 

The store link and page with the active code can be found here: https://toptoys2u.co.uk/collections/onbuy-imports

Kind Regards

[BSS-Commerce]

To address the issue of text getting cut off and to add links to each announcement, you can make a few modifications to your code. I've made some changes to ensure that long text is displayed properly and added links to each announcement. I've also decreased the gap between each announcement. Here's the updated code:

{% if collection.handle == "onbuy-imports" %}
  <style>
    .announcement-bar {
      max-height: 43px;
      width: 100vw;
      background-color: #3b95f0;
      overflow: hidden;
      transition: max-height 0.3s ease;
    }

    .hd-Banner-fixed .announcement-bar {
      max-height: 0;
    }

    .announcement-bar_Ticker {
      display: flex;
      padding-top: 12px;
      padding-bottom: 12px;
      font-size: 15px;
      font-weight: bold;
      letter-spacing: 0.3px;
      line-height: 12px;
      text-transform: uppercase;
      background-color: #3b95f0;
      color: #fff;
    }

    @media only screen and (min-width: 768px) {
      .announcement-bar_Ticker {
        width: 200vw;
      }
    }

    .announcement-bar_Items {
      flex: 1 1 100%;
      display: flex;
      animation: Ticker var(--Animation_Duration, 15s) infinite linear;
    }

    .announcement-bar:hover .announcement-bar_Items {
      animation-play-state: paused;
    }

    .announcement-bar_Item {
      align-items: center;
      flex: 1 1 10%;
      display: flex;
      padding-right: 20px; /* Adjusted the padding */
      text-align: center;
    }

    @media only screen and (min-width: 768px) {
      .announcement-bar_Item {
        padding-right: 0;
      }
    }

    .announcement-bar_Text {
      white-space: nowrap;
      overflow: hidden;
      margin: 0; /* Added to remove default margin */
    }

    .announcement-bar_Link {
      color: #fff;
      text-decoration: none;
    }
  </style>

  <div class="announcement-bar">
    <announcement-ticker class="announcement-bar_Ticker" style="--Animation_Duration: 8s;">
      <div class="announcement-bar_Items">
        <div class="announcement-bar_Item">
          <p class="announcement-bar_Text">
            <a href="your_first_link" class="announcement-bar_Link">Order by 3pm on 21st December for GUARANTEED Christmas Delivery and Choose Parcelforce Next Day at Checkout!</a>
          </p>
        </div>
      </div>

      <div class="announcement-bar_Items">
        <div class="announcement-bar_Item">
          <p class="announcement-bar_Text">
            <a href="your_second_link" class="announcement-bar_Link">Free Standard UK Delivery on orders over £15</a>
          </p>
        </div>
      </div>
    </announcement-ticker>
  </div>
{% endif %}

Replace "your_first_link" and "your_second_link" with the actual URLs you want to use.

=>> These changes should help ensure that long text is displayed properly, and each announcement has a link with reduced spacing between them. Adjust the padding and other styles as needed.

Hope it helps @Toptoys2uHS 

[Toptoys2uHS]

Hello @BSS-Commerce 

Thank you for your reply and update with the code.

Unfortunately, after implementing this, it seems that the transition has stopped entirely, and it does not scroll from right to left anymore.

Is there a line that is missing that caused this?

Kind Regards

**EDIT**

Hello @BSS-Commerce

I think I found the issue, I believe your code missed out this so there was no animation. 

@keyframes Ticker{to{transform:translate(-100%)}}

Thank you very much for all your help, however there is still the issue of the animation not looping correctly, and the first text seems to get cut off after the second text finishes and moves to the end of the screen.

To solve this, I would like to find out if you know how to change this scroll from horizontal to vertical? I would like it to look like this https://codepen.io/panwron/pen/EmyoRp

Kind Regards

[MRamzan]

You can try the code it will help:

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