リンクテキストをスクロールさせるjavascript「Scrollovers」
検索エンジンの高度化にともない閲覧者はトップページではなく、目的のページに直接アクセスする様になっています。
このため、サイト内の回遊率を高めるためリンクの視認性を高めることが必要になります。
Scrolloversではリンクにマウスをのせた時、リンクテキストをスクロールさせるjavascriptを公開しています。
使用方法
Scrolloversからscrollovers.jsをダウンロードし、headに挿入します。
<script type="text/javascript" src="http://yourdomain/scrollovers.js"></script>
またCSSに下記の様に記します。
a.scrollover {
/* デフォルトカラー */
color: #557AFF;
}
a.scrollover em:first-line {
/* ホバー時のカラー */
color: #FF5B3C;
}
*色はお好みでどうぞ。
さらに、 class="scrollover" type="scrollover"をaタグに付与すれば完成です。
<a href="リンク先のURI" class="scrollover" type="scrollover">
オプション
- スクロールスピードの変更:scrollovers_ScrollSpeed(数値が低い方が遅い)
- ロールアップver.:scrollovers_ScrollDownOnMouseOverをfalseに
- 全てのリンクを対象にする:scrollovers_TypeName variableを空白に
- スタートポシションの変更:CSSに以下を追加
a.scrollover .scrollover_Nudge {
top:-1px;
}
Javascriptサンプルページ一覧
skuare.net