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

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

2007年08月07日-はてなブックマーク

スポンサード リンク
[PR] 英単語を忘却曲線アプリを使って超効率よく記憶する方法
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>

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

関連の記事検索:ライブラリ, Ajax, CSS
スポンサード リンク

By.KJ : 2007年08月07日 07:01 livedoor Readerで購読 Twitterに投稿

間違いの指摘をしていただける方はメール、あるいはTwitter/FBでお願いします(クリック)