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

長大なコンテンツがある時、自分が今どの位置にあるのか知りたくなります。書籍であればページ数が書かれており、Webサイトであればページネーションを分けたりします。自分の現在位置が分かることで、後どれくらいのコンテンツが残されているか把握できるようになります。

そんなミニマップをWebサイトに追加してくれるのがpagemapです。

pagemapの使い方

右上に表示されているのがpagemapです。

通常のスクロールはもちろん、pagemapをドラッグした移動もできます。

移動しているところです。

pagemapが面白いのはコンテンツの内容によって自動的にミニマップを表示しているところです。ウィンドウ幅を変えて、コンテンツが変わるとミニマップも変わります。テキスト主体のサイト以外でも使える場面は多そうです。

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

pagemap · mini map for web pages · larsjung.de

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2