横のウェブサイトのトランジションとアニメーション

Question

横のウェブサイトを作成しています。そして、私は要素が画面上に表示されるときにそれらのトランジションとアニメーションを適用したいと考えています。しかし、今では、ページ自体の読み込み時に、すべてのトランジションとアニメーションがすべての要素に適用されています。私は試してみた（：目に見える）が、うまくいかなかった。だから、画面に表示されている要素へのトランジションを適用する方法を教えてください。 ありがとうございます。

Answer 1

現在のビューポートでDOM要素が表示されているかどうかを確認します。

function isElementInViewport(el) { 
      var rect = el.getBoundingClientRect(); 
      if(rect.width!=0&&rect.height!=0&&$('#timeline').is(":visible")) { 
      return (
        rect.top > 0 && 
        rect.left > 0 && 
        rect.bottom < (window.innerHeight || document.documentElement.clientHeight) && 
        rect.right < (window.innerWidth || document.documentElement.clientWidth) 
      ); 
      }else{ 
      return false; 
      } 
     } 

HTMLElementをこの関数の引数として渡し、現在のビューポートで表示可能かどうかを返します。 `と一緒に条件

window.addEventListener("load", function-tocheck-viewport-visibility); 
window.addEventListener("resize", function-tocheck-viewport-visibility); 
window.addEventListener("scroll", function-tocheck-viewport-visibility);