Эффект появления из блюра при скролле

<!--TS19 - Модификация для Тильды. Эффект появления из блюра при скролле https://mod.tistols.com/blur -->
<style>
  .tistols-blur {
    filter: blur(25px);
    will-change: filter;
    transition: filter 0.3s ease-out; /* Добавляем плавный переход */
  }
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
  const blurElements = document.querySelectorAll('.tistols-blur');
  const maxBlur = 25;
  const blurRange = 400; // Диапазон скролла для полного исчезновения blur
  
  // Создаем массив для хранения данных элементов
  const elementsData = Array.from(blurElements).map(element => ({
    element,
    startScroll: null,
    isActive: false,
    completed: false // Флаг завершения анимации
  }));

  function updateBlurs() {
    elementsData.forEach(data => {
      if (!data.isActive || data.completed) return;
      
      const scrollPos = window.pageYOffset - data.startScroll;
      const progress = Math.min(1, Math.max(0, scrollPos / blurRange));
      const blurValue = maxBlur * (1 - progress);
      
      data.element.style.filter = `blur(${blurValue}px)`;
      
      // Если размытие полностью исчезло, помечаем как завершенное
      if (progress >= 1) {
        data.completed = true;
        data.element.style.willChange = 'auto'; // Оптимизация - больше не нужно
      }
    });
  }

  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      const elementData = elementsData.find(data => data.element === entry.target);
      
      if (entry.isIntersecting && !elementData.isActive && !elementData.completed) {
        elementData.startScroll = window.pageYOffset;
        elementData.isActive = true;
        updateBlurs();
      } else if (!entry.isIntersecting && elementData.isActive && !elementData.completed) {
        elementData.isActive = false;
        elementData.element.style.filter = `blur(${maxBlur}px)`;
      }
    });
  }, {threshold: 0.1});

  // Начинаем наблюдать за всеми элементами
  blurElements.forEach(element => observer.observe(element));
  
  window.addEventListener('scroll', updateBlurs);
});
</script>