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

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

サイトのキャプチャ

Fokus
Fokus -GitHub

Fokusのデモ

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

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

デモのキャプチャ

デモページ

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

デモのキャプチャ

デモページ

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

Fokusの使い方

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

Step 1: 外部ファイル

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

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

これだけで、完了です。

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

デモのキャプチャ

コリスで使用

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

top of page

©2017 coliss