[JS]指定した要素のみをマスクして目立たせるスクリプト -jquery.expose

ユーザーのアクションをトリガーにして、クィックマスクモードのように指定した要素を目立たせるスクリプトを紹介します。

Make your HTML elements stand out with jquery expose
demo

適用できるのはスタティックな要素だけではなく、フォームやビデオなどにも使用することができます。

demo: form

demo: video

こういったユーザーに少しでも集中してほしいコンテンツには、効果が高そうです。

使用方法も簡単で、JSファイルを外部ファイルで指定し、スクリプトで適用箇所とカラーと不透明度を指定します。
最小の記述だと、下記のようになります。

$("jQuery SELECTOR").expose({
    color: '#ccc',
    opacity: 0.7,
});

オプションではカラーや不透明度のほかに、ロードやクローズ時のスピード、マスクのid・z-indexなどが変更できます。

対応ブラウザはIE6/7+, Fx1.5/2+, Op9+, Safari2+となっており、実装はjQueryのプラグインのためjquery.jsが必要です。

Post on:2009年5月14日