コンテンツ表示とスクロール時のアニメ効果

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

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

解決方法：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(); 
    }); 
  

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

HTMLのメタタグ(viewport)の設定で違うサイズのブラウザにコンテンツ表示の最適化

• PC・タブレット・モバイルのブラウザのサイズがそれぞれ違います
• コンテンツレイアウトをそれぞれのサイズに対応しきれないことがよく起きます
• メタタグ(viewport)の設定より、ある程度コンテンツの表示に最適化することができます
  • 例：メタタグ(viewport)の設定

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

  • メタタグ(viewport)設定あり/なしのコンテンツ表示結果は以下のようです
    
• 写真と文字だけのコンテンツを違うサイズのブラウザに最適化することが比較的に簡単ですが
  • 表、カラムなどがある複雑なレイアウトのコンテンツではこのメタタグ(viewport)だけでは表示最適化することが難しいです

メタタグ(viewport)の幅設定に固定な値を避けたほうが良い

• viewportの幅設定(width)に固定値の使用ができます
  • 例：<meta name="viewport" content="width=450, initial-scale=1.0">
• widthに固定値を入れると、特定なサイズに対応できますが、ほかのサイズのブラウザに適応できなくなる恐れがあります
• ブラウザの幅に合わせた設定にしたほうが良いでしょう
  • 例：<meta name="viewport" content="width=device-width, initial-scale=1.0">
  • "width=device-width”：ブラウザの幅に応じてコンテンツ表示の最適化をしてくれます

メタタグ(viewport)のスケール(initial-scale)設定に注意

• ”initial-scale=1.0”： コンテンツの拡大/縮小はしないです
• ”initial-scale=0.5”：コンテンツを縮小して表示します
• 縮小表示する場合、倍率よりコンテンツの字が読みづらくなることがありますので、注意する必要があります
• 一方、拡大して表示すると、文字が大きくなって、コンテンツの内容を表示しきれなくなることがあります

メタタグ(viewport)とcss(media)を併用すればより効果的

• メタタグ(viewport)だけでは、コンテンツを違うサイズのブラウザに最適に表示することに限界があります
• css(media：ブレイクポイントの設定)で違うサイズのブラウザに対してコンテンツレイアウト設計を行います

  <!--  例：media でブレイクポイントの設定　-->
  @media (min-width: 360px) {
    body {
      font-size: 1.0em;
    }
  }
  
  @media (min-width: 500px) {
    .seven-day-fc .temp-low,
    .seven-day-fc .temp-high {
      display: inline-block;
      width: 45%;
    }
  
    .seven-day-fc .seven-day-temp {
      margin-left: 5%;
    }
  
    .seven-day-fc .icon {
      width: 64px;
      height: 64px;
    }
  }

• 違うサイズに大雑把なレイアウトの設定ができましたら、メタタグ(viewport)の設定でより効果できとなります