やりたいこと：ページがロード/スクロール時に、コンテンツがブラウザに次から次への流れ込むようなアニメ効果

• ホームページがロード、またはスクロール時にコンテンツが一定な間隔で次から次へ流れ込むアニメ効果が比較的にコンテンツを強調しやすいです。
• 簡単なサンプルを作成して、以下のような効果となります：
  
  

解決方法：cssのtransform効果、jQueryでアニメ効果の作成

• ネットでいろいろなアニメ効果のプラグインがあり、それを利用するのも簡単にできます。
• 元々、簡単なcss/ｊQueryで設定ができるので、プラグイン利用せず、自作で実現することにしました（多いサードパーティーのプラグインを入れるとサイトが重くなる心配もあり）。
• このアニメ効果を設定するには、いくつかのポイントがあります
  • ブラウザサイズ、スクロールと表示要素との距離関係の把握
  • コンテンツ流れ込むタイミングの時間をｊａｖａｓｃｒｉｐｔ動的に設定
  • cssのopacityで柔らかい表現

ブラウザの表示サイズ、表示要素の距離関係

• 表示コンテンツが長い場合、ブラウザのスクロールより、コンテンツの各要素を表示したり、非表示したりします。
• ブラウザのサイズ、各要素との距離関係は以下のような関係となります
  
  
• 表示要素がブラウザとの距離関係は、HTMLのDOMにある$(window).scrollTop()、$(window).height()、$("#obj").offset().top、$("#obj")[0].scrollHeightなどの要素を確認する必要がありま。

cssのopacityで柔らかい動画効果の作成

• css動画効果の効果プロパティはAnimationとTransitionなどがあります。ここでTransitionプロパティを利用します
• cssの設定は以下となります
  

  .obj{
  
      font-size: 60px;
  
      opacity: 0;
  
      background-color: rgba(231, 222, 222, 1);
  
      margin: 10px;
  
      padding: 10px;
  
  }
  
  .ts {
  
      opacity: 1;
  
      transform: translateY(-20px);
  
      transition: transform 0.8s ease-out 0s, 
  
                  opacity 0.8s ease-out 0s;
  
  } 

• コンテンツの各要素に表示と非表示はcssのopacityで制御します（visibilityプロパティは利用しない）。
• opacityの表示/非表示はtransitionで柔らかく切り替えが可能となります

javascriptで各表示要素の表示タイミングを動的に設定

• ページロード時に、各要素が一斉に作動することが一般的（このようなプラグインが沢山）です
• ここで、各要素の表示の時間差を設定して、次から次への流れる効果を求めいたいです
• 作成ポイントは以下のようです
  • 最初はすべての要素を非表示にします：opacity：0 に設定
  • ブラウザの表示領域内の要素を表示タイミングを動的に設定し（既に設定されたものを無視<-スクロールの時）、順次に表示させます。
  • opacityもtransitionのease-outプロパティで柔らかく表現
• javascriptは以下のようなもの
  

    $(window).on("load", function(){
  
        function display(){
  
          var counter = 0;      // スクロールより、露出した要素のみのカウンター
  
          $(".obj").each( function(){
  
            var obj_bottom = $(this).offset().top + $(this)[0].offsetHeight ;
  
            var scroll_bottom = $(window).scrollTop() + $(window).height();
  
            // 下の要素＋上の要素がブラウザに露出した際に
  
            if( obj_bottom < scroll_bottom 
  
                  && $(this).offset().top > $(window).scrollTop()  ) {
  
              // 露出した要素のみ
  
              if( !$(this).hasClass("ts") ){
  
                // アニメ効果cssクラスの追加＋遅延時間を各要素に追加
  
                $(this).addClass("ts");
  
                $(this).css( "transition-delay", counter*150+"ms");
  
                counter ++ ;
  
              }
  
            } else {
  
            // 上の要素＋下の要素が不可視になったら、アニメ効果css＋遅延cssの除去
  
              $(this).removeClass( "ts" ) ;
  
              $(this).removeAttr('style');
  
            }
  
          });
  
        }
  
        // スクロールされた時に、要素露出のチェック
  
        $(window).on("scroll", function(){ display(); }) ;
  
        // Windowロード時に一度要素のチェック
  
        display(); 
  
    });
  

• 全体的には、比較的に簡単なものとなります