Я не могу заставить свой Javascript работать с моим текстом

Question

Я украл этот код JavaScript для слайдов в изображениях с помощью прокрутки, но я хочу применить это к своему тексту, но я не могу понять, как.

HTML-код:

<p class="align-right slide-in">
hoi

</p>
<p class="align-left slide-in">


hoi
</p>
<p class="align-right slide-in">hoi</p>

Код CSS

    .slide-in {
      opacity:0;
      transition:all .5s;
    }

    .align-left.slide-in {
      transform:translateX(-30%) scale(0.95);
    }
    .align-right.slide-in {
      transform:translateX(30%) scale(0.95);
    }

    .slide-in.active {
      opacity:1;
      transform:translateX(0%) scale(1);
    }
.slide-in.active {
      opacity:1;
      transform:translateX(0%) scale(1);
    }

Я украл большую часть сценария из 30-дневного вызова JavaScript. Он был создан для слайдов в изображениях, но я хочу применить это к своему тексту.

 <script>
        function debounce(func, wait = 20, immediate = true) {
          var timeout;
          return function() {
            var context = this, args = arguments;
            var later = function() {
              timeout = null;
              if (!immediate) func.apply(context, args);
            };
            var callNow = immediate && !timeout;
            clearTimeout(timeout);
            timeout = setTimeout(later, wait);
            if (callNow) func.apply(context, args);
          };
        };

        var sliderImages = document.querySelectorAll('.slide-in');

    function checkSlide() {
      sliderImages.forEach(sliderImage => {
        // half way through the image
        const slideInAt = (window.scrollY + window.innerHeight) - sliderImage.height / 2;
        // bottom of the image
        const imageBottom = sliderImage.offsetTop + sliderImage.height;
        const isHalfShown = slideInAt > sliderImage.offsetTop;
        const isNotScrolledPast = window.scrollY < imageBottom;
        if (isHalfShown && isNotScrolledPast) {
          sliderImage.classList.add('active');
        } else {
          sliderImage.classList.remove('active');
        }
      });
    }

    window.addEventListener('scroll', debounce(checkSlide));

Answer 1

Ваша страница должна быть достаточно большой, чтобы вызвать событие прокрутки. Вам также необходимо изменить логику в checkSlide работать с p элементы. Вот пример JSFiddle из работающих переходов:

https://jsfiddle.net/3uf07s5n/

function checkSlide() {
      sliderImages.forEach(sliderImage => {

          sliderImage.classList.add('active');
          // You need to figure out when to add and remove the active class
          // sliderImage.classList.remove('active');
      });
    }