Onscroll Text Highlight Section

                    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<div class="page-width scroll-text-wrapper" style="padding-top: {{ section.settings.padding_top }}px; padding-bottom: {{ section.settings.padding_bottom }}px; background-color: {{ section.settings.background_color }};">
  <div class="scroll-text" id="text-container" style="color: {{ section.settings.text_color }};">
    {{ section.settings.text }}
  </div>
</div>

<style>

  .scroll-text span {
    color: {{ section.settings.text_color }};
    opacity: 0.3;
    transition: color 0.5s, opacity 0.5s; /* Smooth transition for color change */
  }

  .scroll-text .dark {
    color: {{ section.settings.highlight_color }};
    opacity: 1;
  }
.scroll-text-wrapper .scroll-text {
    text-align: center;
    line-height: 1;
    max-width: 933px;
    margin: 0 auto;
    letter-spacing: 0em;
}
.scroll-text-wrapper .scroll-text span {
    font-family: 'Chiaroscura';
    font-size: 42px;
}
 
</style>

<script>
  $(document).ready(function() {
    const textContainer = $('#text-container');
    const text = textContainer.text();
    textContainer.empty();

    // Wrap each letter in a span
    for (let i = 0; i < text.length; i++) {
      const letter = $('<span>').text(text[i]);
      textContainer.append(letter);
    }

    $(window).scroll(function() {
      const scroll = $(window).scrollTop();
      const letters = textContainer.children('span');

      letters.each(function(index) {
        const offset = index * 7; // Delay effect for each letter (adjust as needed)
        
        if (scroll > offset) {
          $(this).addClass('dark');
        } else {
          $(this).removeClass('dark');
        }
      });
    });
  });
</script>

{% schema %}
{
  "name": "Onscroll Text Color",
  "settings": [
    {
      "type": "text",
      "id": "text",
      "label": "Text Content",
      "default": "Your text goes here."
    },
    {
      "type": "range",
      "id": "padding_top",
      "label": "Padding Top",
      "min": 0,
      "max": 100,
      "step": 1,
      "default": 20
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "label": "Padding Bottom",
      "min": 0,
      "max": 100,
      "step": 1,
      "default": 20
    },
    {
      "type": "color",
      "id": "background_color",
      "label": "Background Color",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "text_color",
      "label": "Text Color",
      "default": "#cccccc"
    },
    {
      "type": "color",
      "id": "highlight_color",
      "label": "Highlight Color",
      "default": "#000000"
    }
  ],
  "presets": [
    {
      "name": "Onscroll Text Color"
    }
  ]
}
{% endschema %}