[JS]実装はたった一行でOK！ページの選択した範囲を強調する超軽量スクリプト -Fokus

Post on:2012年9月25日

sponsors

選択した範囲を強調するために、アニメーションでページの残りを半透明なレイヤーで暗くするスクリプトを紹介します。
Chromeのエクステンションも用意されているので、自サイトだけでなく他サイトでも利用できます。

Fokusのデモ

デモはCanvasを使用しているため、IEを除くモダンブラウザでご覧ください。
※IE9もダメでした。

デモでは中央のエレメントを選択すると、それ以外が半透明なレイヤーで隠されます。

選択範囲は複数のエレメントにまたがることも可能で、キーボードによる選択にも対応しています。

気持ちいいアニメーションで範囲が広がります。

Fokusの使い方はちょー簡単です。

当スクリプトを外部ファイルとして記述します。

<script src="js/fokus.min.js"></script>

これだけで、完了です。

FokusはChromeのエクステンションとしても配付されているので、他のサイトを閲覧中でも利用することができます。

Chromeのエクステンションは、下記からダウンロードできます。