メインコンテンツに移動
ホーム

古松

メインナビゲーション

  • ホーム
  • ビデオ
  • ご連絡

パンくず

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

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

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

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

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

  • ネットでいろいろなアニメ効果のプラグインがあり、それを利用するのも簡単にできます。
  • 元々、簡単なcss/jQueryで設定ができるので、プラグイン利用せず、自作で実現することにしました(多いサードパーティーのプラグインを入れるとサイトが重くなる心配もあり)。
  • このアニメ効果を設定するには、いくつかのポイントがあります
    • ブラウザサイズ、スクロールと表示要素との距離関係の把握
    • コンテンツ流れ込むタイミングの時間をjavascript動的に設定
    • 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(); 
      }); 
    
  • 全体的には、比較的に簡単なものとなります

クリックイベント発生の座標:offsetX/Y,clientX/Y,pageX/Y,screenX/Yの区別

イベント発生場所の座標:offsetX/Y,clientX/Y,pageX/Y,screenX/Y

  • マウスクリック(click)、オバー(mousehover)などのイベントが発生すると、発生場所の座標がイベントのプロパティにあります
    eventのプロパティ
  • イベント発生場所の座標は以下のようです
    • offsetX, offsetY
    • clientX, clientY
    • pageX, pageY
    • screenX, screenY

参照オブジェクトの違う座標を理解する

  • イベント発生時の座標がそれぞれの参照オブジェクトを参照します
  • offestX/Y:イベントリスナーを設定してオブジェクト(例:div、アンカータグ、ボタンなど)
    • そのオブジェクトを表示するボックスの縦、横の座標となります
  • clientX/Y:viewportの縦、横までの座標となります
    • viewportはブラウザの可視範囲を指しています(詳細は:「HTMLコンテンツをモバイル・タブレットのブラウザに最適化するメタタグ(viewport)の利用」を参考)
  • pageX/Y:コンテンツのHTMLのドキュメント(htmlタグ)に参照します
    • コンテンツが長い時に、ブラウザのviewportに表示切れないことがあります。
    • ブラウザのスクロール機能でhtmlコンテンツを表示します
  • screenX/Y:文字通りにスクリーン(モニター)の可視範囲を参考します
  • それぞれの座標は以下のイメージで表現
    eventの発生場所の座標

htmlにあるエレメントの座標(例:offsetX/Y)と違う

  • htmlにあるそれぞれのエレメントの座標(例:offsetX/Y)があります
  • エレメントが親エレメントとの位置関係を示しています
  • 詳細は「コンテンツ表示とスクロール時のアニメ効果 」を参考します

検索フォーム

カテゴリ別

  • laravel
  • drupal
  • javascript
  • windows
  • html
  • mysql
  • php
  • apache
  • css
  • SEO
  • video
  • wordpress
  • linux
  • python
  • Electron
  • Visual Studio Code

google ads