How to make marquee text load across the page in Dawn theme?

[erikapruett]

Hi!

I added this new section to my Dawn theme with the following code. I would like the text to be across the page when the page is loaded rather than starting on the right. Would love help on how to do this? Thank you!!

{%- if  section.blocks.size > 0 and section.settings.show_marquee_bar -%}
<div class="marquee-bar 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="message" style="background:{{block.settings.colorBackground}};color:{{block.settings.colorText}};">{{block.settings.message}}</div>
  {%- endfor -%}
  </marquee>
</div>

<style>
.marquee-bar.messages{    
  position: relative;
  overflow: hidden;
  display: flex;
}
.marquee-bar .message{
  text-align:center;    
  padding:2px 7%;
  display: inline-block;
}
</style>

{%- endif -%}
 
{% schema %}
{
  "name": "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": "3"
    }
],
"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": "Marquee"
    }
  ]
}
{% endschema %}

Website:

https://isla-base-theme.myshopify.com/pages/press-alternative

password: demo

[SomeUsernameHe]

Hmmm, I do not see this marquee on your site. Where did you have it?

[erikapruett]

Oh weird. I tried to link to it. If you scroll down to the footer and click Press 2, you will see it on that page!

[SomeUsernameHe]

Right now it is not starting at all, are you coding this section from the ground up or using a prebuilt marquee code?

[erikapruett]

Prebuilt, using this tutorial.

Thank you!

[SomeUsernameHe]

That tutorial is using the native HTML Marquee which is pretty much depreciated at this point. After fiddling around for about 30 mins I did come up with this solution that might work for you. It would be a complete section replacement. 

{% schema %}
{
  "name": "Node Marquee",
  "settings": [
    {
      "type": "checkbox",
      "id": "show_marquee",
      "label": "Show Marquee",
      "default": true
    },
    {
      "type": "text",
      "id": "speed",
      "label": "Speed",
      "default": "1"
    }
  ],
  "blocks": [
    {
      "type": "text",
      "name": "Marquee Item",
      "settings": [
        {
          "id": "text",
          "type": "text",
          "label": "Text",
          "default": "Sample Marquee Text"
        },
        {
          "type": "color",
          "id": "text_color",
          "label": "Text Color",
          "default": "#000000"
        },
        {
          "type": "color",
          "id": "background_color",
          "label": "Background Color",
          "default": "#ffffff"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Node Marquee"
    }
  ]
}
{% endschema %}

{% if section.settings.show_marquee %}
<div id="node-marquee">
  {% for block in section.blocks %}
  <span style="background-color:{{ block.settings.background_color }};color:{{ block.settings.text_color }};">{{ block.settings.text }}</span>
  {% endfor %}
</div>

<script src="https://cdn.jsdelivr.net/npm/node-marquee@3.0.6/build/cdn/index.min.js"></script>
<script>
  nodeMarquee({
    parent: '#node-marquee',
    speed: {{ section.settings.speed }},
    prependWhitespace: true
  });
</script>
{% endif %}

[Gil-Momo]

Did the new code work? I am looking for something similar