Shopify Tilted Marquee – Animated Angled Text Banners

                    <!-- 
========================================
Section Name: Tilted Marquee
Tech Stack: Liquid, HTML, CSS, JavaScript, GSAP
What This Section Does: 
- Displays multiple rows of tilted, horizontally scrolling text with customizable angles.
- Features GSAP-powered smooth animations with adjustable scroll speeds.
- Includes customizable colors, text sizes, and spacing between rows.
- Creates an eye-catching visual effect with angled text banners.

Promotion: 
Add a modern, dynamic look to your Shopify store with tilted marquee text banners. Perfect for announcements, promotions, or brand statements. Get it now at [PrebuiltTemplates](https://prebuilttemplates.com/).
========================================
-->
<section class="tilted-marquee-section" style="background-color: {{ section.settings.background_color }}; padding: {{ section.settings.padding_top }}px 0 {{ section.settings.padding_bottom }}px;">
  {% for block in section.blocks %}
    {% if block.type == 'marquee_row' %}
      <div class="tilted-marquee" 
           data-marquee-duration="{{ block.settings.scroll_speed }}"
           style="background-color: {{ block.settings.background_color }}; transform: rotateZ({{ block.settings.rotation_angle }}deg);"
           {{ block.shopify_attributes }}>
        <div class="tilted-marquee__inner">
          <div class="tilted-marquee__content" style="color: {{ block.settings.text_color }}; font-size: {{ block.settings.text_size }}px;">
            {{ block.settings.text }}
          </div>
        </div>
      </div>
    {% endif %}
  {% endfor %}
</section>

<style>
  .tilted-marquee-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: {{ section.settings.row_spacing }}px;
    min-height: 100vh;
    overflow: hidden;
    font-family: 'Poppins', sans-serif;
  }

  .tilted-marquee {
    padding: 1vw;
    white-space: nowrap;
    overflow: hidden;
  }

  .tilted-marquee__inner {
    display: flex;
    gap: 20px;
  }

  .tilted-marquee__content {
    font-size: clamp(40px, 4.375vw, 70px);
  }

  @media screen and (max-width: 768px) {
    .tilted-marquee__content {
      font-size: clamp(24px, 5vw, 40px);
    }
  }
</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    const marquees = document.querySelectorAll('.tilted-marquee');
    
    if(!marquees.length) return;

    marquees.forEach(item => {
      const marqueeInner = item.querySelector('.tilted-marquee__inner');
      const marqueeContent = marqueeInner.querySelector('.tilted-marquee__content');
      
      // Duration
      const duration = item.getAttribute('data-marquee-duration');
      
      // Element Clone
      const marqueeContentClone = marqueeContent.cloneNode(true);
      marqueeInner.append(marqueeContentClone);
      
      // Marquee animation
      const marqueeContentAll = marqueeInner.querySelectorAll('.tilted-marquee__content');
      marqueeContentAll.forEach(element => {
        gsap.to(element, {
            x: "-101%",
            repeat: -1,
            duration: duration,
            ease: 'linear'
        });
      });
    });
  });
</script>

{% schema %}
{
  "name": "Tilted Marquee",
  "settings": [
    {
      "type": "color",
      "id": "background_color",
      "label": "Section Background",
      "default": "#ffffff"
    },
    {
      "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": 10,
      "max": 100,
      "step": 5,
      "unit": "px",
      "label": "Spacing Between Rows",
      "default": 50
    }
  ],
  "blocks": [
    {
      "type": "marquee_row",
      "name": "Marquee Row",
      "settings": [
        {
          "type": "text",
          "id": "text",
          "label": "Marquee Text",
          "default": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s."
        },
        {
          "type": "color",
          "id": "background_color",
          "label": "Background Color",
          "default": "#ee6c52"
        },
        {
          "type": "color",
          "id": "text_color",
          "label": "Text Color",
          "default": "#ffffff"
        },
        {
          "type": "range",
          "id": "text_size",
          "min": 20,
          "max": 100,
          "step": 1,
          "unit": "px",
          "label": "Text Size",
          "default": 60
        },
        {
          "type": "range",
          "id": "rotation_angle",
          "min": -10,
          "max": 10,
          "step": 0.5,
          "label": "Rotation Angle",
          "default": -2
        },
        {
          "type": "range",
          "id": "scroll_speed",
          "min": 10,
          "max": 60,
          "step": 1,
          "label": "Scroll Speed (seconds)",
          "default": 30
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Tilted Marquee",
      "category": "Text",
      "blocks": [
        {
          "type": "marquee_row",
          "settings": {
            "background_color": "#ee6c52",
            "rotation_angle": -2,
            "scroll_speed": 30
          }
        },
        {
          "type": "marquee_row",
          "settings": {
            "background_color": "#1f1f1f",
            "rotation_angle": -1,
            "scroll_speed": 20
          }
        }
      ]
    }
  ]
}
{% endschema %}