前の記事 «:超クールJavaScriptライブラリ「Ext v1.1」正式版リリース
次の記事 »:3カラムのクールなWordPressテーマ集30+

リンクホバーを超カッコよくアニメーションするJavaScriptライブラリ「Scrollovers」

2007年08月07日

スポンサード リンク
Scrollovers - A New Way of Linking
Scrollovers are a way to quickly and easily add flair to your web pages, giving your users an experience they weren't expectin g.

リンクホバーを超カッコよくアニメーションするJavaScriptライブラリ「Scrollovers」。
例えば、次のアンカーにカーソルを合わせて みてください。

[YOUR TEXT HERE]

Scrollovers を使えば、こんなリンクの貼り方が出来ます。
普通のリンクより 分かりやすいだけでなく、訪問者に驚きを与えることが出来ますね。

実装方法は次のように、ライブラリを読み込んだ後、アンカー タグのclass, type 属性にscrollover を指定するだけです。

<script type="text/javascript" src="http://www.scrollovers.com/js/scrollovers.js"></script>
<a href="#" class="scrollover" type="scrollover">[YOUR TEXT HERE]</a>

次のようにスタイル指定して色などを変えることも可能です。

<style>
a.scrollover {
/* Default Colour/Styles here */
color: #557AFF;
}
a.scrollover em:first-line {
/* Rollover Colour/Styles here */
color: #FF5B3C;
}
</style>

これは使えますね。
ライブラリを修正して、独自のアニメーションを設定してみるのもよいかも。

スポンサード リンク

投稿者 KJ : 2007年08月07日 07:01 | ブックマークに追加する Subscribe with livedoor Reader
間違いの指摘をしていただける方はメールでお願いします


本を執筆しました。