ITエンジニア/デザイナ向けにオープンソースを毎日紹介

SPA(シングルページアプリケーション)の流れもあり、Webサイトがどんどん縦長になっているように見えます。そんな中、一番下までスクロールした後で一番上にあるヘッダーにアクセスしたいと誰が思うでしょうか。

そこで離脱を防げるのがヘッダーバーをスクロール追従型にすることでしょう。使ってみたいのはHeadhesiveです。

Headhesiveの使い方

Headhesiveを使ったデモサイトです。初期表示時です。

スクロールすると、それに合わせて一旦ヘッダーが消えます。そしてその後、ヘッダーの一部だけが表示されます。

実際にアニメーションさせているところです。

あまり激しく動かすとがくっと動く時がありますが、普通にスクロールさせて見ている分には殆ど気になることはないでしょう。単純にヘッダーを残すだけでなく、スクロールの動きに合わせてアニメーションしているところが自然です。

HeadhesiveはHTML5/JavaScript製のオープンソース・ソフトウェア(MIT License)です。

Headhesive demo - Mark Goodyear

markgoodyear/headhesive.js

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2