2019年08月29日(木)

Webページにドラッグでページスクロール可能なミニマップを生成するスクリプト・「pagemap」

• 0
• 0
• 9
• 15

pagemap

See the Pen KKPqwER by kachibito
(@kachibito) on CodePen.

pagemapはWebページにドラッグでページスクロール可能なミニマップを生成するスクリプトです。非依存型
単体で動作します。

上デモ右端にあるやつです。Atomなど、テキストエディタにもよくあるミニマップをWebぺージで自動生成してくれます。

ミニマップはマウスドラッグでページ内をスクロール可能で、ぱっと見でもどんなコンテンツがあるかもある程度分かるようになっています。

canvasを用意します

#map { position: fixed; top: 0; right: 0; width: 200px; height: 100%; z-index: 100; }

生成されるマップを固定します

WordPressやJQueryなどを中心に、Web開発者のためのチュートリアルやコードスニペットの記事を公開しているTakahashi Yoheiさんのブログかちびと.netの記事『Webページにドラッグでページスクロール可能なミニマップを生成するスクリプト・「pagemap」』についてまとめています。

この記事は特にjavascriptについて書かれており、 気になるWebデザインの記事やまとめを見つけたら「本文を読む」をクリックすると、記事配信元のかちびと.netで全文を閲覧することができます。RSS Sourceの「このサイトの記事一覧」をクリックするとかちびと.netの記事をまとめて表示することができます。また閲覧数や各SNSのシェア状況を目安に、他の人たちが記事をどのように評価しているのか推測することができます。Webデザインにとって有益な記事をまとめていますので、ぜひリンク先をチェックしてみてください。