Scrollovers.jsを使う。


[Scrollovers]
http://www.scrollovers.com/
くるくる回るリンクホバーです。
実装も簡単で、スタイルシートで表示カスタマイズもできます。

[ダウンロードと設定]
Scrolloversのページの[How do I add it to my pages?]章の、
[download the file here]リンクから該当のスクリプトをダウンロードすることができます。
ソースをダウンロードせずに、URLを直接指定することも可能となっています。

<ダウンロードした場合>
<script type="text/javascript" src="xxxxxx/scrollovers.js"></script>

<URL 指定>
<script type="text/javascript" src="http://www.scrollovers.com/js/scrollovers.js"></script>

[実装方法]
リンクホバー効果をつけたいアンカータグに、type:scrolloverを指定します。
実際の効果は、アンカータグにclass指定をし、スタイルシートで決定します。
◆HTML
<a href="リンク先URL" class="havorscroll" type="scrollover">[リンク]</a>
◆CSSファイル
a.havorscroll {
  /* 通常リンクのスタイルを記述 */
}
a.havorscroll em:first-line {
    /* ロールオーバー時のスタイルを記述 */
}

[オプション]
今回のスクリプトは基本的にtype指定をするだけなので、
オプション設定は特にありません。
ただ、直接JavaScriptコードをいじってカスタマイズすることは可能です。
サンプルページによると、次のような変更をすることができます。
定数はソースの上部にまとめて宣言されているのですぐに見つけられます。

【scrollovers_ScrollSpeed】
現在[3]に設定されている値を変更すると、スクロールの速さを変更できます。

【scrollovers_ScrollDownOnMouseOver】
この値を[false]にすると、
上から下へ回転していたリンクが、下から上へと回転するようになります。
(この場合、マウスオーバー時と通常のスタイル指定も逆になります。)

【scrollovers_TypeName】
この値で、指定すべきtype名(scrollover)を決定しています。

[仕組み(簡単に)]
スタイルシートを見るとわかるのですが、このスクリプトを実行することにより、
emタグで囲んだリンク文字と同じ文字列を持つブロック要素を生成しています。
それを指定したイベント(MouseOver時とMouseOut時)で切り替えるよう設定してありました。
CSSでclass:scrollover_Nudgeのtopの値を変更することで
切り替え位置のカスタマイズが可能です。

[サンプル]
こんな感じになります。
☆☆☆TEST CLICK☆☆☆

大きな文字の方が効果がよくわかります。
★★★TEST CLICK★★★

もちろん、背景色の切り替え、背景画像設定も可能です。
★☆★TEST CLICK★☆★

※ブログ内に実装しようとすると、デフォルトで設定されている
色々なスタイルシートに邪魔されてしまうことがあります(はまりました。)

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください