How to remove odd space and add more space to marquee text in annoucement bar

ZephyrShop
Excursionist
52 0 6

So I added marquee text but now there is an odd space when the marquee text starts at the beginning again.

 

ZephyrShop_0-1711635473367.png

 

Also I want there to be a bigger space at the end and start of each separate message because it seems to be all squished.

 

And I want it to be slowed down a little bit.

 

Last thing can someone show me how to change what I have just said, on my own, just in case i don't like the results.

 

MY STORE IS: https://zephyrshop.org/

 

Here is the code which someone gave me for the marquee text.

{%- for block in section.blocks -%}
{%- case block.type -%}
{%- when 'announcement' -%}
<div class="announcement-bar color-{{ block.settings.color_scheme }} gradient" role="region" aria-label="{{ 'sections.header.announcement' | t }}" {{ block.shopify_attributes }}>
{%- if block.settings.message_one != blank -%}
{%- if block.settings.link != blank -%}
<a href="{{ block.settings.link }}" class="announcement-bar__link link link--text focus-inset animate-arrow">
{%- endif -%}
<div class="page-width marquee enable-animation marquee--hover-pause">

<ul style="list-style: none" class="marquee__content">
<li class="announcement-bar__message {{ block.settings.text_alignment }} h5">
{{ block.settings.message_one | escape }}
{%- if block.settings.link != blank -%}
{% render 'icon-arrow' %}
{%- endif -%}
</li>
<li class="announcement-bar__message {{ block.settings.text_alignment }} h5">
{{ block.settings.message_two | escape }}
{%- if block.settings.link != blank -%}
{% render 'icon-arrow' %}
{%- endif -%}
</li>
<li class="announcement-bar__message {{ block.settings.text_alignment }} h5">
{{ block.settings.message_three | escape }}
{%- if block.settings.link != blank -%}
{% render 'icon-arrow' %}
{%- endif -%}
</li>
<li class="announcement-bar__message {{ block.settings.text_alignment }} h5">
{{ block.settings.message_four | escape }}
{%- if block.settings.link != blank -%}
{% render 'icon-arrow' %}
{%- endif -%}
</li>
<li class="announcement-bar__message {{ block.settings.text_alignment }} h5">
{{ block.settings.message_five | escape }}
{%- if block.settings.link != blank -%}
{% render 'icon-arrow' %}
{%- endif -%}
</li>

</ul>

<ul style="list-style: none" aria-hidden="true" class="marquee__content">
<li class="announcement-bar__message {{ block.settings.text_alignment }} h5">
{{ block.settings.message_one | escape }}
{%- if block.settings.link != blank -%}
{% render 'icon-arrow' %}
{%- endif -%}
</li>
<li class="announcement-bar__message {{ block.settings.text_alignment }} h5">
{{ block.settings.message_two | escape }}
{%- if block.settings.link != blank -%}
{% render 'icon-arrow' %}
{%- endif -%}
</li>
<li class="announcement-bar__message {{ block.settings.text_alignment }} h5">
{{ block.settings.message_three| escape }}
{%- if block.settings.link != blank -%}
{% render 'icon-arrow' %}
{%- endif -%}
</li>
<li class="announcement-bar__message {{ block.settings.text_alignment }} h5">
{{ block.settings.message_four | escape }}
{%- if block.settings.link != blank -%}
{% render 'icon-arrow' %}
{%- endif -%}
</li>
<li class="announcement-bar__message {{ block.settings.text_alignment }} h5">
{{ block.settings.message_five | escape }}
{%- if block.settings.link != blank -%}
{% render 'icon-arrow' %}
{%- endif -%}
</li>
</ul>

</div>
{%- if block.settings.link != blank -%}
</a>
{%- endif -%}
{%- endif -%}
</div>
{%- endcase -%}
{%- endfor -%}

{% 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": "message_one",
"default": "Message one",
"label": "Announcement one"
},
{
"type": "text",
"id": "message_two",
"default": "Message two",
"label": "Announcement two"
},
{
"type": "text",
"id": "message_three",
"default": "Message three",
"label": "Announcement three"
},
{
"type": "text",
"id": "message_four",
"default": "Message four",
"label": "Announcement four"
},
{
"type": "text",
"id": "message_five",
"default": "Message five",
"label": "Announcement five"
},
{
"type": "select",
"id": "text_alignment",
"options": [
{
"value": "left",
"label": "t:sections.announcement-bar.blocks.announcement.settings.text_alignment.options__1.label"
},
{
"value": "center",
"label": "t:sections.announcement-bar.blocks.announcement.settings.text_alignment.options__2.label"
},
{
"value": "right",
"label": "t:sections.announcement-bar.blocks.announcement.settings.text_alignment.options__3.label"
}
],
"default": "center",
"label": "t:sections.announcement-bar.blocks.announcement.settings.text_alignment.label"
},
{
"type": "color_scheme",
"id": "color_scheme",
"label": "t:sections.all.colors.label",
"default": "accent-1"
},
{
"type": "url",
"id": "link",
"label": "t:sections.announcement-bar.blocks.announcement.settings.link.label"
}
]
}
],
"default": {
"blocks": [
{
"type": "announcement"
}
]
}
}
{% endschema %}
<style>

.marquee {
--gap: 1rem;
position: relative;
display: flex;
overflow: hidden;
user-select: none;
gap: var(--gap);
}
.marquee__content {
flex-shrink: 0;
display: flex;
justify-content: space-around;
gap: var(--gap);
min-width: 100%;
}

@keyframes scroll {
from {
transform: translateX(0);
}
to {
transform: translateX(calc(-100% - var(--gap)));
}
}

@media (prefers-reduced-motion: reduce) {
.marquee__content {
animation-play-state: paused !important;
}
}

/* Enable animation */
.enable-animation .marquee__content {
animation: scroll 20s linear infinite;
}

/* Pause on hover */
.marquee--hover-pause:hover .marquee__content {
animation-play-state: paused;
}

.marquee--fit-content {
max-width: fit-content;
}


.marquee--pos-absolute .marquee__content:last-child {
position: absolute;
top: 0;
left: 0;
}

.enable-animation .marquee--pos-absolute .marquee__content:last-child {
animation-name: scroll-abs;
}

@keyframes scroll-abs {
from {
transform: translateX(calc(100% + var(--gap)));
}
to {
transform: translateX(0);
}
}
ul.marquee__content {
margin: 0;
}
</style>

Replies 2 (2)

theycallmemakka
Shopify Partner
1491 337 361

Hi @ZephyrShop 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code just above tag </body>

<style>
.enable-animation .marquee__content {
    animation: scroll 60s linear infinite!important;
    gap: 8rem!important;
}
</style>

 

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

 

Best Regards,
Makka

Buy me a Coffee


Enjoy Shopify for $1. Sign up now


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

Raj-webdesigner
Shopify Partner
253 57 60

Your Old Code On Add This New Full Code

<style>
.marquee {
  --gap: 5rem;
  position: relative;
  display: flex;
  overflow: hidden;
  user-select: none;
  gap: var(--gap);
}
.marquee__content {
  flex-shrink: 0;
  display: flex;
  justify-content: space-around;
  gap: var(--gap);
  min-width: 100%;
}
@keyframes scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-100% - var(--gap)));
  }
}
@media (prefers-reduced-motion: reduce) {
  .marquee__content {
    animation-play-state: paused !important;
  }
}
/* Enable animation */
.enable-animation .marquee__content {
  animation: scroll 60s linear infinite;
}
/* Pause on hover */
.marquee--hover-pause:hover .marquee__content {
  animation-play-state: paused;
}
.marquee--fit-content {
  max-width: fit-content;
}
.marquee--pos-absolute .marquee__content:last-child {
  position: absolute;
  top: 0;
  left: 0;
}
.enable-animation .marquee--pos-absolute .marquee__content:last-child {
  animation-name: scroll-abs;
}
@keyframes scroll-abs {
  from {
    transform: translateX(calc(100% + var(--gap)));
    }
  to {
      transform: translateX(0);
    }
}
ul.marquee__content {
  margin: 0;
}
</style>

{%- for block in section.blocks -%}
  {%- case block.type -%}
    {%- when 'announcement' -%}
      <div
        class="announcement-bar color-{{ block.settings.color_scheme }} gradient"
        role="region"
        aria-label="{{ 'sections.header.announcement' | t }}"
        {{ block.shopify_attributes }}
      >
        {%- if block.settings.message_one != blank -%}
          {%- if block.settings.link != blank -%}
            <a
              href="{{ block.settings.link }}"
              class="announcement-bar__link link link--text focus-inset animate-arrow"
            >
          {%- endif -%}
          <div class="page-width marquee enable-animation marquee--hover-pause">
            <ul style="list-style: none" class="marquee__content">
              <li class="announcement-bar__message {{ block.settings.text_alignment }} h5">
                {{ block.settings.message_one | escape }}
                {%- if block.settings.link != blank -%}
                  {% render 'icon-arrow' %}
                {%- endif -%}
              </li>
              <li class="announcement-bar__message {{ block.settings.text_alignment }} h5">
                {{ block.settings.message_two | escape }}
                {%- if block.settings.link != blank -%}
                  {% render 'icon-arrow' %}
                {%- endif -%}
              </li>
              <li class="announcement-bar__message {{ block.settings.text_alignment }} h5">
                {{ block.settings.message_three | escape }}
                {%- if block.settings.link != blank -%}
                  {% render 'icon-arrow' %}
                {%- endif -%}
              </li>
              <li class="announcement-bar__message {{ block.settings.text_alignment }} h5">
                {{ block.settings.message_four | escape }}
                {%- if block.settings.link != blank -%}
                  {% render 'icon-arrow' %}
                {%- endif -%}
              </li>
              <li class="announcement-bar__message {{ block.settings.text_alignment }} h5">
                {{ block.settings.message_five | escape }}
                {%- if block.settings.link != blank -%}
                  {% render 'icon-arrow' %}
                {%- endif -%}
              </li>
            </ul>

            <ul style="list-style: none" aria-hidden="true" class="marquee__content">
              <li class="announcement-bar__message {{ block.settings.text_alignment }} h5">
                {{ block.settings.message_one | escape }}
                {%- if block.settings.link != blank -%}
                  {% render 'icon-arrow' %}
                {%- endif -%}
              </li>
              <li class="announcement-bar__message {{ block.settings.text_alignment }} h5">
                {{ block.settings.message_two | escape }}
                {%- if block.settings.link != blank -%}
                  {% render 'icon-arrow' %}
                {%- endif -%}
              </li>
              <li class="announcement-bar__message {{ block.settings.text_alignment }} h5">
                {{ block.settings.message_three | escape }}
                {%- if block.settings.link != blank -%}
                  {% render 'icon-arrow' %}
                {%- endif -%}
              </li>
              <li class="announcement-bar__message {{ block.settings.text_alignment }} h5">
                {{ block.settings.message_four | escape }}
                {%- if block.settings.link != blank -%}
                  {% render 'icon-arrow' %}
                {%- endif -%}
              </li>
              <li class="announcement-bar__message {{ block.settings.text_alignment }} h5">
                {{ block.settings.message_five | escape }}
                {%- if block.settings.link != blank -%}
                  {% render 'icon-arrow' %}
                {%- endif -%}
              </li>
            </ul>
          </div>
          {%- if block.settings.link != blank -%}
            </a>
          {%- endif -%}
        {%- endif -%}
      </div>
  {%- endcase -%}
{%- endfor -%}

{% 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": "message_one",
              "default": "Message one",
              "label": "Announcement one"
            },
            {
              "type": "text",
              "id": "message_two",
              "default": "Message two",
              "label": "Announcement two"
            },
            {
              "type": "text",
              "id": "message_three",
              "default": "Message three",
              "label": "Announcement three"
            },
            {
              "type": "text",
              "id": "message_four",
              "default": "Message four",
              "label": "Announcement four"
            },
            {
              "type": "text",
              "id": "message_five",
              "default": "Message five",
              "label": "Announcement five"
            },
            {
              "type": "select",
              "id": "text_alignment",
              "options": [
                  {
                  "value": "left",
                  "label": "t:sections.announcement-bar.blocks.announcement.settings.text_alignment.options__1.label"
                  },
                  {
                  "value": "center",
                  "label": "t:sections.announcement-bar.blocks.announcement.settings.text_alignment.options__2.label"
                  },
                  {
                  "value": "right",
                  "label": "t:sections.announcement-bar.blocks.announcement.settings.text_alignment.options__3.label"
                  }
                ],
              "default": "center",
              "label": "t:sections.announcement-bar.blocks.announcement.settings.text_alignment.label"
              },
            {
              "type": "color_scheme",
              "id": "color_scheme",
              "label": "t:sections.all.colors.label",
              "default": "accent-1"
            },
            {
              "type": "url",
              "id": "link",
              "label": "t:sections.announcement-bar.blocks.announcement.settings.link.label"
            }
          ]
        }
    ],
    "default": {
    "blocks": [
    {
      "type": "announcement"
      }
    ]
  }
}
{% endschema %}

If you require further help to optimize your store, please don’t hesitate to reach out.


This contribution will always benefit you and you will get my full help easily and you can contact me easily.


Your Willpower Contribution Link

:- Contribution

Contect On My Mail :-Mail@gmail.com