HTML+CSSは、要素の位置までスクロールして読み込みアニメーション効果を表示します。

//左コンテナ.item-leftContainer {
    不透明度: 0;
    変換: translateX(-100px);
  }
  //右コンテナ.item-rightContainer {
    不透明度: 0;
    変換: translateX(100px);
  }

//アニメーション @keyframes showLeft {
    に {
      不透明度: 1;
      変換: translateX(0px);
    }
  }
  @keyframes 右を表示 {
    に {
      不透明度: 1;
      変換: translateX(0px);
    }
  }
  @keyframes 左を非表示 {
    に {
      不透明度: 0;
      変換: translateX(-100px);
    }
  }
  @keyframes を右に非表示 {
    に {
      不透明度: 0;
      変換: translateX(100px);
    }
  }

コンポーネントマウント() {
        this.checkScrollHeightAndLoadAnimation();
        window.addEventListener('スクロール'、this.bindHandleScroll);
    }
    コンポーネントのマウントを解除します（）{
        window.removeEventListener('scroll', this.bindHandleScroll);
    }
    bindHandleScroll = (イベント) => {
        this.checkScrollHeightAndLoadAnimation();
    }
    チェックスクロールの高さと読み込みアニメーション() {
        定数 windowHeight = window.innerHeight;
        parentEelement を document.getElementById("softwareUsingWays-container") として htmlElement に格納します。
        const parentOffsetTop = parentEelement.offsetTop;
        leftElement を (parentEelement.getElementsByClassName("item-leftContainer") として htmlCollectionOf<HTMLElement>)[0] にします。
        if (window.pageYOffset + windowHeight > leftElement.offsetTop + parentOffsetTop + 200) {
            leftElement.style.animation = "showLeft .6s forwards" //アニメーションを追加} else {
            leftElement.style.animation = "hideLeft 0s forwards" //アニメーションを非表示}
        rightElement を (parentEelement.getElementsByClassName(".item-rightContainer") として HTMLCollectionOf<HTMLElement>)[0] にします。
        if (window.pageYOffset + windowHeight > rightElement.offsetTop + parentOffsetTop + 200) {
            rightElement.style.animation = "showRight .6s forwards" //アニメーションを追加} else {
            rightElement.style.animation = "hideRight 0s forwards" //アニメーションを非表示}
    }