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

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

erikapruett
Shopify Partner
12 0 3

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

Replies 6 (6)

SomeUsernameHe
Shopify Partner
495 54 99

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

Have I helped? Consider putting coffee in my mouth!
Buy Me a Coffee
erikapruett
Shopify Partner
12 0 3

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
Shopify Partner
495 54 99

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

Have I helped? Consider putting coffee in my mouth!
Buy Me a Coffee
erikapruett
Shopify Partner
12 0 3

Prebuilt, using this tutorial.

 

Thank you!

 

 

SomeUsernameHe
Shopify Partner
495 54 99

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 %}
Have I helped? Consider putting coffee in my mouth!
Buy Me a Coffee
Gil-Momo
Excursionist
26 0 4

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