新感覚!アニメーションする固定ヘッダーを実装する方法

「On-Scroll Animated Header」は固定ヘッダーの高さをスクロールに応じて変更します。リンク先で実装方法が紹介されています。

On-Scroll Animated Header

screenshot218

デモページで実際に試していただきたいのですが、僕にはとても新鮮なUXでした。上記の画像の状態からスクロールしていくと、以下のようにヘッダーの高さがアニメーションで狭まります。

screenshot219

しっかりレスポンシブデザインも取り込まれています。メニューがタイトルの下に移動していますね。

screenshot220

紹介されているJavaScriptの実装方法にコメントをつけて記載しておきます。

var cbpAnimatedHeader = (function() {

  var docElem = document.documentElement,
    header = document.querySelector( '.cbp-af-header' ),
    didScroll = false,
    changeHeaderOn = 300;  //ここでアニメーションを開始するスクロール位置を指定します

  function init() {
    window.addEventListener( 'scroll', function( event ) {
      if( !didScroll ) {
        didScroll = true;
        setTimeout( scrollPage, 250 );
      }
    }, false );
  }

  //
  function scrollPage() {
    var sy = scrollY();
    if ( sy >= changeHeaderOn ) {  //ここで今のスクロール位置と定義したスクロール位置を比較しています。
      //指定したスクロール位置を越えたら以下のクラスをheaderに追加します
      classie.add( header, 'cbp-af-header-shrink' );
    }
    else {
      //指定したスクロール位置を越えていなければ以下のクラスをheaderから削除します
      classie.remove( header, 'cbp-af-header-shrink' );
    }
    didScroll = false;
  }

  //スクロール位置を取得する関数です
  function scrollY() {
    return window.pageYOffset || docElem.scrollTop;
  }

  init();

})();

 

“addEventListener”で”scroll”を指定して、関数を実行しています。参考になりますね。

ブログに取り入れたら面白いと思いました。ぜひ参考にどうぞ。

 

Home > JavaScript > 新感覚!アニメーションする固定ヘッダーを実装する方法

Return to page top