Sliding announcement bar Text / Marquee Text DAWN THEME

FOP
Explorer
100 0 17

Hello,
I am looking for coding which allows the text on our announcement bar to scroll.  I found a Youtube video with coding but it appears to only work on the mobile version of the site and not the web version. 

Does anyone have a solution for this?

 

Thanks,

Natalie

Replies 12 (12)

Sphurti
Shopify Partner
79 9 11
FOP
Explorer
100 0 17

Where would I add this code?

DavidEKim
Shopify Partner
392 131 184

Hi,

The <marquee> element is a deprecated HTML tag. If you use it, your pages or apps may be broken. To make the announcement bar to scroll, you need to modify the announcement bar coding.

 

If you don't have knowledge of css & liquid coding, you may copy the code below and replace your announcement-bar.liquid under Sections.

 

 

{%- for block in section.blocks -%}
  {%- case block.type -%}
    {%- when 'announcement' -%}
      <div class="announcement-bar scroll-box color-{{ block.settings.color_scheme }} gradient" role="region" aria-label="{{ 'sections.header.announcement' | t }}" {{ block.shopify_attributes }}>
        {%- if block.settings.text != blank -%}
          <div class="scroll-container">
          {%- if block.settings.link != blank -%}
            <a href="{{ block.settings.link }}" class="announcement-bar__link link link--text focus-inset animate-arrow">
          {%- endif -%}
              <p class="announcement-bar__message h5" id="scroll-element">
                {{ block.settings.text | escape }}
                {%- if block.settings.link != blank -%}
                  {% render 'icon-arrow' %}
                {%- endif -%}
              </p>
          {%- if block.settings.link != blank -%}
            </a>
          {%- endif -%}
          </div>
        {%- endif -%}
      </div>
  {%- endcase -%}
{%- endfor -%}

{% style %}
.announcement-bar__message {
  text-align: right !important;
}
@-webkit-keyframes scroll{
  0% {
    margin-right: 0%;    
  }
  100% {
    margin-right: 100%;
  }
}
.scroll-box {
  display: inline-flex;
  justify-content: center;
  white-space: nowrap;
  font-size: 1.1em;
  overflow: hidden;
  width: 100%;
  background: rgb(var(--color-background));
  background: var(--gradient-background);
}
@media screen and (min-width: 768px) {
  .scroll-container {
    width: 50%;
    direction: rtl; 
    margin-left: 120px;
    overflow: hidden;
  }
}
@media screen and (max-width: 767px) {
  .scroll-container {
    width: 100%;
    direction: rtl; 
    margin-left: 24px;
    overflow: hidden;
  }
}
#scroll-element {
  padding: 10px;
}
{% endstyle %}
<script>

var elemWidth = document.getElementById('scroll-element').offsetWidth;
var time = elemWidth/120; /* lower number for slow & higher number for fast scroll */
document.getElementById('scroll-element').style.cssText = "animation: scroll "+time+"s linear infinite;"

</script>
{% schema %}
{
  "name": "t:sections.announcement-bar.name",
  "max_blocks": 12,
  "blocks": [
    {
      "type": "announcement",
      "name": "t:sections.announcement-bar.blocks.announcement.name",
      "settings": [
        {
          "type": "text",
          "id": "text",
          "default": "Welcome to our store",
          "label": "t:sections.announcement-bar.blocks.announcement.settings.text.label"
        },
        {
          "type": "select",
          "id": "color_scheme",
          "options": [
            {
              "value": "accent-1",
              "label": "t:sections.all.colors.accent_1.label"
            },
            {
              "value": "accent-2",
              "label": "t:sections.all.colors.accent_2.label"
            },
            {
              "value": "background-1",
              "label": "t:sections.all.colors.background_1.label"
            },
            {
              "value": "background-2",
              "label": "t:sections.all.colors.background_2.label"
            },
            {
              "value": "inverse",
              "label": "t:sections.all.colors.inverse.label"
            }
          ],
          "default": "accent-1",
          "label": "t:sections.all.colors.label"
        },
        {
          "type": "url",
          "id": "link",
          "label": "t:sections.announcement-bar.blocks.announcement.settings.link.label"
        }
      ]
    }
  ],
  "default": {
    "blocks": [
      {
        "type": "announcement"
      }
    ]
  }
}
{% endschema %}

 

 

The following elements are modified.

1. added scroll-box class in the first div

2. created second div with scroll-container class within scroll-box div

3. added scroll-element id in announcement-bar message

4. added necessary css style within the announcement-bar.liquid

5. added necessary javascript within the announcement-bar.liquid

 

You may change the scroll speed from above code.

To change the scroll speed, please change the number in the code from 120 to 80 or 160 per your needs.

 

var time = elemWidth/120; /* lower number for slow & higher number for fast scroll */

 

 

To change the scroll area width, you may change the width 50% to different number.

 

@media screen and (min-width: 768px) {
  .scroll-container {
    width: 50%; /* Change this number for scroll area width */
    direction: rtl; 
    margin-left: 120px; /* You may also change this number for left margin of the scroll area */
    overflow: hidden;
  }
}

 

If you have any questions, please let me know.

Hope it helps.

Thanks.

 

 

If helpful, please Like and Accept Solution.
Want to customize your store, please feel free to contact me.
PeopleVillage - Shopify Partner
FOP
Explorer
100 0 17

Screen Shot 2022-08-06 at 18.28.13.pngIt only moves in the middle section even when the width is 100%
Not sure what to do to fix this 

Sphurti
Shopify Partner
79 9 11

share store link 

FOP
Explorer
100 0 17
DavidEKim
Shopify Partner
392 131 184

Hi,

After you replace the announcement-bar.liquid, you should save the change and wait 5-10 seconds to apply the change. I just tested the code in Dawn theme.

20220806_183920.png

 

As you wanted to be 100% width. I tested it on my temporary store.

The store URL is https://blithe-cosmetic.myshopify.com/?preview_theme_id=134476038400 with PW: peoplevillage

 

20220806_190519.png20220806_190615.png

 

If you need help, let me know (send me a private message).

I can fix it for free.

It should take less than 5 minutes.

Hope it helps.

Thanks.

If helpful, please Like and Accept Solution.
Want to customize your store, please feel free to contact me.
PeopleVillage - Shopify Partner
FOP
Explorer
100 0 17

That has worked, we noticed that on the mobile site the text jumps when it enters from the right

jds20
Excursionist
14 0 2

Hey! Thank's a lot for your messages. It helped me a lot but I got more question for you. 
If I wan't to add differents messages scrolling with icons.. How can I do it? Thank's in advance!

noetictreasures
New Member
5 0 0

Hello are you able to assist me with adding

scroll announcement bar?

jumpson
Visitor
1 0 0

How do I make the text scroll in from the right side instead of just appearing? 

MRamzan
Shopify Partner
92 1 19

Solved this with the below code. For reference you can watch this video with FREE Code attached. Just copy and paste. This code is compatible with any theme: 

 

<style>
  .custom-marquee {
    position: relative;
    width: 100vw;
    max-width: 100%;
    height: 43px;
    overflow-x: hidden;
    background:{{section.settings.colorBackground}}; 
    color:{{section.settings.colorText}}; 
  }
  .custom-marquee a {
    color:{{section.settings.colorText}}; 
  }
  .custom-marquee .track {
      position: absolute;
      bottom: 6px;
      white-space: nowrap;
      will-change: transform;
      animation: marquee 7s linear infinite;
  }
  .custom-marquee .content {
    margin-left: 40px;
  }
  @keyframes marquee {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-20%);
    }
  }
</style>
  <div class="custom-marquee " role="region" {{ block.shopify_attributes }}>
    {%- if section.settings.text != blank -%}
      {%- if section.settings.link != blank -%}
        <a href="{{ section.settings.link }}" class="">
      {%- endif -%}
          <div class="track ">
            <span class="content marquee-text">{{ section.settings.text | escape }}</span>
            <span class="content marquee-text">{{ section.settings.text | escape }}</span>
            <span class="content marquee-text">{{ section.settings.text | escape }}</span>
            <span class="content marquee-text">{{ section.settings.text | escape }}</span>
            <span class="content marquee-text">{{ section.settings.text | escape }}</span>
            <span class="content marquee-text">{{ section.settings.text | escape }}</span>
            <span class="content marquee-text">{{ section.settings.text | escape }}</span>
            <span class="content marquee-text">{{ section.settings.text | escape }}</span>
            <span class="content marquee-text">{{ section.settings.text | escape }}</span>
            <span class="content marquee-text">{{ section.settings.text | escape }}</span>
            {%- if section.settings.link != blank -%}
              {% render 'icon-arrow' %}
            {%- endif -%}
          </div>
          {%- if section.settings.link != blank -%}
        </a>
      {%- endif -%}
    {%- endif -%}
  </div>
<script>
var marquees = document.getElementsByClassName("marquee-text");
for (let i = 0; i < marquees.length; i++) {
   // console.log(marquees.item(i));
  let str = marquees.item(i).innerHTML;
  let improvedText = str.replaceAll("|", "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;")
  console.log(improvedText)
  marquees.item(i).innerHTML = improvedText
}
</script>
{% schema %}
{
  "name": "Marquee Announcement",
  "settings": [
    {
      "type": "text",
      "id": "text",
      "default": "Welcome to our store",
      "label": "Add text to display"
    },
    {
      "type": "color",
      "id": "colorBackground",
      "label": "Background color",
      "default": "#000"
    },
    {
      "type": "color",
      "id": "colorText",
      "label": "Text color",
      "default": "#fff"
    },
    {
      "type": "url",
      "id": "link",
      "label": "Link"
    }
  ]
}
{% endschema %}
Hire Me:

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