【作ってみた】スクロールで要素が登場するとハイライトしてくれるjQueryプラグイン「scrollHighLighter」

この記事は7年以上前の記事です。情報が古い場合がありますのでお気を付け下さい。

Webサイトを閲覧していると、一体どこがクリック出来るエリアなのか分からないことがあります。
このプラグインは、画面をスクロールしていって、該当の要素が画面内に登場するとハイライトしてくれるというプラグインです。

デモ
ダウンロード

仕組みとしては、指定した要素の上にdivの透明レイヤーを配置して、ハイライト時に一瞬だけ表示という方法で実現しています。
もともとはaタグにバインドして利用することを想定していましたが、他の任意の要素にもバインドできます。

基本的な使い方

html

<script src="js/jquery-1.4.4.min.js" language="javascript" type="text/javascript"></script>
<script src="js/jquery.shl.js" language="javascript" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
  $("a").shl();
})
</script>

オプションを指定した例

<script src="js/jquery-1.4.4.min.js" language="javascript" type="text/javascript"></script>
<script src="js/jquery.shl.js" language="javascript" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
  $("a").shl({
    hlColor:"#FFEE00",
    cnt:2
  });
})
</script>

オプション

hlColor
ハイライトされる色を#ffffffなどで指定します。色名では指定できません。

cnt
連続してハイライトする回数を指定します。

指定された要素は、ページに登場すると一度だけハイライトされます。

今後のアップデート予定

登場回数指定オプション
その他要望があれば。
不具合、ご要望はこちらからどうぞ。

ライセンス

MITライセンスで公開します。ご自由に。

蛇足

このプラグインは、一般的なWebサイトに対しての提案だと思ってます。
一般的に、クリッカブルな領域であるかどうかを表現するには、デザインでの見せ方が必要と言われますが、そもそも平面でクリッカブルか否かを判断させるのは無理があります。
ならば、動作で見せてもいいんじゃないの？と思って作ったのがこちらのプラグイン。
UIに対する提案はいろいろ考えたいところですね。