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

ZephyrShop · ‎03-28-2024

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

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>

theycallmemakka · ‎03-28-2024

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

Support Me: Buy me a Coffee

For quick response - Message Me

Ping me at: theycallmemakka@gmail.com

Raj-webdesigner · ‎03-28-2024

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

Are you looking for Shopify Developer then your search is over I will help you

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

:-

❤️Tip❤️

Contect On My Mail :-Mail@gmail.com

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