Shopify Scrolling Tags – Animated Marquee Display

                    <!-- 
========================================
Section Name: Scrolling Tags
Tech Stack: Liquid, HTML, CSS, JavaScript
What This Section Does: 
- Displays multiple rows of horizontally scrolling tags with customizable content.
- Features adjustable scroll speeds for each row with a global speed multiplier.
- Includes hover effects and customizable colors for tags and backgrounds.
- Creates a seamless infinite scrolling effect with gradient fade-in/out edges.

Promotion: 
Add visual interest to your Shopify store with animated scrolling tags. Perfect for showcasing features, categories, or keywords in an engaging way. Get it now at [PrebuiltTemplates](https://prebuilttemplates.com/).
========================================
-->
<section class="scrolling-tags-wrap" style="background-color: {{ section.settings.background_color }}; padding: {{ section.settings.padding_top }}px 0 {{ section.settings.padding_bottom }}px;">
  <div class="scrolling-tags-container page-width">
    {% for block in section.blocks %}
      {% if block.type == 'tag_row' %}
        {% assign adjusted_speed = block.settings.scroll_speed | times: section.settings.speed_multiplier | divided_by: 10 %}
        <div class="scrolling-tags-row" style="--scroll-speed: {{ adjusted_speed }}s" {{ block.shopify_attributes }}>
          <div>
            {% assign tags = block.settings.tags | split: ',' %}
            {% for tag in tags %}
              <span style="background-color: {{ block.settings.tag_background }}; color: {{ block.settings.tag_color }};">{{ tag | strip }}</span>
            {% endfor %}
          </div>
          <div>
            {% for tag in tags %}
              <span style="background-color: {{ block.settings.tag_background }}; color: {{ block.settings.tag_color }};">{{ tag | strip }}</span>
            {% endfor %}
          </div>
        </div>
      {% endif %}
    {% endfor %}
  </div>
</section>

<style>
  .scrolling-tags-wrap {
    width: 100%;
    overflow: hidden;
  }
  
  .scrolling-tags-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: {{ section.settings.row_spacing }}px;
  }

  .scrolling-tags-row {
    position: relative;
    display: flex;
    width: 100%;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #fff 30%, #fff 70%, transparent);
  }

  .scrolling-tags-row div {
    white-space: nowrap;
    animation: scrolling-tags-animate var(--scroll-speed) linear infinite;
    animation-delay: calc(var(--scroll-speed)/-1);
  }

  .scrolling-tags-row div:nth-child(2) {
    animation: scrolling-tags-animate2 var(--scroll-speed) linear infinite;
    animation-delay: calc(var(--scroll-speed)/-2);
  }

  @keyframes scrolling-tags-animate {
    0% {
      transform: translateX(100%);
    }
    100% {
      transform: translateX(-100%);
    }
  }

  @keyframes scrolling-tags-animate2 {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-200%);
    }
  }

  .scrolling-tags-row div span {
    display: inline-flex;
    margin: 10px;
    padding: 5px 10px;
    border-radius: 5px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    font-family: sans-serif;
    transition: 0.5s;
  }

  .scrolling-tags-row div span:hover {
    background: {{ section.settings.hover_color }} !important;
    cursor: pointer;
  }
</style>

{% schema %}
{
  "name": "Scrolling Tags",
  "settings": [
    {
      "type": "color",
      "id": "background_color",
      "label": "Background Color",
      "default": "#161616"
    },
    {
      "type": "color",
      "id": "hover_color",
      "label": "Tag Hover Color",
      "default": "#f52789"
    },
    {
      "type": "range",
      "id": "padding_top",
      "label": "Padding Top",
      "default": 50,
      "min": 0,
      "max": 100,
      "step": 5
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "label": "Padding Bottom",
      "default": 50,
      "min": 0,
      "max": 100,
      "step": 5
    },
    {
      "type": "range",
      "id": "row_spacing",
      "min": 0,
      "max": 50,
      "step": 5,
      "unit": "px",
      "label": "Spacing Between Rows",
      "default": 10
    },
    {
      "type": "range",
      "id": "speed_multiplier",
      "min": 5,
      "max": 20,
      "step": 1,
      "label": "Speed Control (lower = faster)",
      "default": 10,
      "info": "Adjust to control the overall speed of all scrolling rows"
    }
  ],
  "blocks": [
    {
      "type": "tag_row",
      "name": "Tag Row",
      "settings": [
        {
          "type": "text",
          "id": "tags",
          "label": "Tags (comma separated)",
          "default": "HTML, CSS, Javascript, React JS, Node JS, SQL, Git, AWS, AZURE"
        },
        {
          "type": "range",
          "id": "scroll_speed",
          "min": 5,
          "max": 30,
          "step": 1,
          "unit": "s",
          "label": "Relative Scroll Speed",
          "default": 20,
          "info": "Base speed for this row (will be affected by the global Speed Control)"
        },
        {
          "type": "color",
          "id": "tag_background",
          "label": "Tag Background Color",
          "default": "#333333"
        },
        {
          "type": "color",
          "id": "tag_color",
          "label": "Tag Text Color",
          "default": "#ffffff"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Scrolling Tags",
      "category": "Text",
      "blocks": [
        {
          "type": "tag_row"
        },
        {
          "type": "tag_row"
        },
        {
          "type": "tag_row"
        }
      ]
    }
  ]
}
{% endschema %}