Make Marquee Text Start With Full Weight

[hamza-elkaissi1]

hi everyone, can anyone please help me to Make marquee text start with full weight,  which means I want it to start with no empty space, this is the section code, thank you

my store: https://you-boho-vibes.myshopify.com/

password: sotroy

{%- if section.blocks.size > 0 and section.settings.show_marquee_bar -%}
  <div class="hura-marquee-bar hura-messages">
    <marquee
      width="100%"
      scrollamount="{{ section.settings.speed }}"
      direction="{{ section.settings.direction }}"
      {% if section.settings.pause_on_hover %}
        onmouseover="this.stop();" onmouseout="this.start();"
      {% endif %}
    >
      {%- for block in section.blocks -%}
        <div
          class="hura-message"
          style="background:{{block.settings.colorBackground}};color:{{block.settings.colorText}};"
        >
          {{ block.settings.message }}
        </div>
      {%- endfor -%}
    </marquee>
  </div>
  <p style="display:none!important;">Powered by <a href="//www.huratips.com" target="_blank">HuraTips.Com</a></p>
  <style>
    .hura-marquee-bar.hura-messages{
      position: relative;
      overflow: hidden;
      display: flex;
    }
    .hura-marquee-bar .hura-message{
      text-align:center;
      padding:2px 7%;
      display: inline-block;
    }
  </style>
{%- endif -%}

{% schema %}
{
  "name": "Hura Marquee",
  "settings": [
    {
      "type": "checkbox",
      "id": "show_marquee_bar",
      "label": "Show"
    },
    {
      "type": "select",
      "id": "direction",
      "options": [
        {
          "value": "left",
          "label": "Right to Left"
        },
        {
          "value": "right",
          "label": "Left to Right"
        }
      ],
      "default": "right",
      "label": "Direction"
    },
    {
      "type": "checkbox",
      "id": "pause_on_hover",
      "label": "Pause on hover"
    },
    {
      "type": "text",
      "id": "speed",
      "label": "Speed",
      "default": "15"
    }
],
"blocks": [
    {
      "type": "header",
      "name": "Message",
      "settings": [
          {
            "id": "message",
            "type": "textarea",
           "label": "Message"
          },
          {
            "type": "color",
            "id": "colorBackground",
            "label": "Background color",
            "default": "#ffffff"
          },
          {
            "type": "color",
            "id": "colorText",
            "label": "Text color",
            "default": "#000"
          }
      ]
    }
  ],
  "presets": [
    {
      "name": "Hura Marquee"
    }
  ]
}
{% endschema %}

[GemPages · Accepted solution]

Hello @hamza-elkaissi1 

I change the above code to start the text with no empty space. It worked on my side.

You can try to change code as below:

{%- if section.blocks.size > 0 and section.settings.show_marquee_bar -%}
  <div class="hura-marquee-bar hura-messages">
   <div class="cus-marquee">
      {%- for block in section.blocks -%}
        <div
          class="hura-message cus-content"
          style="background:{{block.settings.colorBackground}};color:{{block.settings.colorText}};"
        >
          {{ block.settings.message }}
        </div>
      {%- endfor -%}
          {%- for block in section.blocks -%}
            <div
              class="hura-message cus-content"
              style="background:{{block.settings.colorBackground}};color:{{block.settings.colorText}};"
            >
              {{ block.settings.message }}
            </div>
          {%- endfor -%}
    </div>
  </div>
  <p style="display:none!important;">Powered by <a href="//www.huratips.com" target="_blank">HuraTips.Com</a></p>
  <style>
    .hura-marquee-bar.hura-messages{
      position: relative;
      overflow: hidden;
    }
    .hura-marquee-bar .hura-message{
      text-align:center;
      padding:2px 0 2px 0;
      display: inline-block;
    }
    .cus-marquee {
      height: {{ section.settings.height }}px;
      overflow-x: hidden;
      display: flex;
      overflow: hidden;
      width: 100%;
    }  
    .cus-content{
      white-space: nowrap;
      height: 100%;
      display: inline-flex !important;
      align-items: center;
      animation: marquee {{ section.settings.speed }}s linear infinite;
      {% if section.settings.direction == 'right' %}
        animation-direction: reverse;
      {% endif %}
    }
    {% if section.settings.pause_on_hover %}
      .hura-marquee-bar:hover .cus-content {
        animation-play-state: paused;
      }
    {% endif %}

     @keyframes marquee {
        from {
          transform: translateX(0%);
        }
        to {
          transform: translateX(-100%);
        }
      }
  </style>
{%- endif -%}

{% schema %}
{
  "name": "Hura Marquee",
  "max_blocks": 1,
  "settings": [
    {
      "type": "checkbox",
      "id": "show_marquee_bar",
      "label": "Show"
    },
    {
      "type": "select",
      "id": "direction",
      "options": [
        {
          "value": "left",
          "label": "Right to Left"
        },
        {
          "value": "right",
          "label": "Left to Right"
        }
      ],
      "default": "right",
      "label": "Direction"
    },
    {
      "type": "checkbox",
      "id": "pause_on_hover",
      "label": "Pause on hover"
    },
    {
      "type": "number",
      "id": "speed",
      "label": "Speed",
      "default": 25
    },
     {
      "type": "number",
      "id": "height",
      "label": "Height",
      "default": 40
    }
],
"blocks": [
    {
      "type": "header",
      "name": "Message",
      "settings": [
          {
            "id": "message",
            "type": "textarea",
           "label": "Message"
          },
          {
            "type": "color",
            "id": "colorBackground",
            "label": "Background color",
            "default": "#ffffff"
          },
          {
            "type": "color",
            "id": "colorText",
            "label": "Text color",
            "default": "#000"
          }
      ]
    }
  ],
  "presets": [
    {
      "name": "Hura Marquee"
    }
  ]
}
{% endschema %}

 Result:

I hope my recommendation can support you.

Best regards,
GemPages Support Team

[hamza-elkaissi1]

thank you very much.

[hamza-elkaissi1]

hey I just noticed a little problem in the code you provide me, I can't add more than one block in the announcement bar anymore, can you please help me to fix that.