Blog

{%- style -%}
  #marquee-{{ section.id }} {
    position: relative;
    height: {{ section.settings.section_height }}px;
    padding-top: {{ section.settings.padding_top }}px;
    padding-bottom: {{ section.settings.padding_bottom }}px;
    overflow: hidden;
    background-color: {{ section.settings.text_background }};
    {% if section.settings.background_image %}
      background-image: url('{{ section.settings.background_image | img_url: '2000x' }}');
      background-size: cover;
      background-position: center;
    {% endif %}
  }
  
  .marquee-container-{{ section.id }} {
    display: flex;
    align-items: center;
    height: 100%;
    width: 100%;
    overflow: hidden;
    position: relative;
  }
  
  .marquee-content-{{ section.id }} {
    display: flex;
    align-items: center;
    position: absolute;
    white-space: nowrap;
    will-change: transform;
    animation: marquee-{{ section.id }} {{ section.settings.animation_speed }}s linear infinite;
  }
  
  .marquee-content-{{ section.id }} p {
    margin: 0;
    padding: 0 2rem;
    font-size: {{ section.settings.font_size }}px;
    font-weight: {{ section.settings.font_weight }};
    color: {{ section.settings.text_color }};
    font-family: {{ section.settings.font_family }};
  }
  
  @keyframes marquee-{{ section.id }} {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-50%);
    }
  }
  
  {% if section.settings.direction == 'right' %}
    .marquee-content-{{ section.id }} {
      animation-direction: reverse;
    }
  {% endif %}
{%- endstyle -%}

<div id="marquee-{{ section.id }}">
  <div class="marquee-container-{{ section.id }}">
    <div class="marquee-content-{{ section.id }}">
      {% for i in (1..10) %}
        <p>{{ section.settings.marquee_text }}</p>
      {% endfor %}
    </div>
  </div>
</div>


<script>
document.addEventListener('DOMContentLoaded', function() {
  document.querySelectorAll('[id^="marquee-"]').forEach(marqueeSection => {
    const sectionId = marqueeSection.id.replace('marquee-', '');
    const marqueeContent = marqueeSection.querySelector(`.marquee-content-${sectionId}`);
    
    // Duplicate content for seamless looping
    marqueeContent.innerHTML += marqueeContent.innerHTML;
  });
});
</script>


{% schema %}
{
  "name": "Marquee Text",
  "settings": [
    {
      "type": "header",
      "content": "Background Settings"
    },
    {
      "type": "image_picker",
      "id": "background_image",
      "label": "Background Image"
    },
    {
      "type": "range",
      "id": "section_height",
      "min": 50,
      "max": 500,
      "step": 10,
      "unit": "px",
      "label": "Section Height",
      "default": 100
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 5,
      "unit": "px",
      "label": "Top Padding",
      "default": 10
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 5,
      "unit": "px",
      "label": "Bottom Padding",
      "default": 10
    },
    {
      "type": "header",
      "content": "Text Settings"
    },
    {
      "type": "text",
      "id": "marquee_text",
      "label": "Marquee Text",
      "default": "Your marquee text goes here"
    },
    {
      "type": "range",
      "id": "font_size",
      "min": 12,
      "max": 72,
      "step": 1,
      "unit": "px",
      "label": "Font Size",
      "default": 24
    },
    {
      "type": "select",
      "id": "font_weight",
      "label": "Font Weight",
      "options": [
        {
          "value": "400",
          "label": "Normal"
        },
        {
          "value": "500",
          "label": "Medium"
        },
        {
          "value": "600",
          "label": "Semi-bold"
        },
        {
          "value": "700",
          "label": "Bold"
        }
      ],
      "default": "600"
    },
    {
      "type": "color",
      "id": "text_color",
      "label": "Text Color",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "text_background",
      "label": "Text Background Color",
      "default": "#000000"
    },
    {
      "type": "select",
      "id": "font_family",
      "label": "Font Family",
      "options": [
        {
          "value": "inherit",
          "label": "Theme default"
        },
        {
          "value": "'Helvetica Neue', Arial, sans-serif",
          "label": "Helvetica/Arial"
        },
        {
          "value": "Georgia, serif",
          "label": "Georgia"
        },
        {
          "value": "'Times New Roman', Times, serif",
          "label": "Times New Roman"
        },
        {
          "value": "'Courier New', Courier, monospace",
          "label": "Courier New"
        }
      ],
      "default": "inherit"
    },
    {
      "type": "header",
      "content": "Animation Settings"
    },
    {
      "type": "range",
      "id": "animation_speed",
      "min": 5,
      "max": 100,
      "step": 1,
      "unit": "s",
      "label": "Animation Speed (seconds per cycle)",
      "default": 20
    },
    {
      "type": "select",
      "id": "direction",
      "label": "Direction",
      "options": [
        {
          "value": "left",
          "label": "Left to Right"
        },
        {
          "value": "right",
          "label": "Right to Left"
        }
      ],
      "default": "left"
    }
  ],
  "presets": [
    {
      "name": "Marquee Text",
      "category": "Text"
    }
  ]
}
{% endschema %}