リンクがくるっと回るScrollover 使い方とずれる原因！ jQuery版も

マウスオーバーでリンクをスクロールさせる事ができるscrollover(JavaScriptモジュール)を試してみました。jQueryプラグイン版もあり、使い方をご紹介します。しかし、クロスブラウザ対応がとても難しい事がわかりました。

scrollovers(JavaScript)

SCROLLOVERS - A New Way of Linkingにて、デモと使い方が確認できます。JavaScript単体のモジュールで、マウスオーバー(hover)によって、リンク文字がくるりと動きます。

使い方はとても簡単で、以下のようにheadで宣言し、

  <script type="text/javascript" src="scrollovers.jsの場所"></script>

CSSで、色を指定します。注意として、text-decoration:underline;は、emの方にしか効きません。

   a.scrollover {/* デフォルトカラー */color: #557AFF;}
   a.scrollover em:first-line {/* ホバー時のカラー */color: #FF5B3C;}

そして、HTML(XHTML)で、スクロールさせたいリンクに、classとtypeを設定するだけです。

  <a href="リンク先のURI" class="scrollover" type="scrollover">スクロール文字</a>

JavaScriptのソースを変更すると、以下の設定ができます。

• Type文字を変更：scrollovers_TypeName='scrollover'にする(scrolloverを変更)
• スクロールスピードの変更：scrollovers_ScrollSpeed=x;(xの数値が低い方が遅い)
• 全てのリンクを対象：scrollovers_TypeName=''にする
• ロールアップ：scrollovers_ScrollDownOnMouseOver=falseにする
• スタートポジションの変更：CSSにa.scrollover .scrollover_Nudge{top:-1px;}等を追加

Scrollover(jQuery plugin)

上記、scrollovers(JavaScript)のjQuery版があります。[jQuery] Re: "scollovers" animationで紹介されているjQueryプラグインのjQuery Plugin: scrollover（デモ）と、Source Codeです。ただし、JavaScript版と仕様が少し異なっています。jQuery版は、animateが終了するまで次のanimateはキューされます。これはこれで楽しいです。オプションを指定することで、キューされなくすることも可能です。

jquery.scrollover.jsを、headで読み込むか、jQueryのソースの最後に追加し、
CSSで、色を指定します。こちらは、text-decoration:underline;は、emでも効きます。

   a.scrollover {/* デフォルトカラー */color: XXX;}
   a.scrollover em:first-line {/* ホバー時のカラー */color: YYY;}

そして、HTML(XHTML)で、スクロールさせたいリンクに、classを設定するだけです。

  <a href="リンク先のURI" class="scrollover">スクロール文字</a>

くるりんとするスクロールのスピードを変えるには、下記の250の数字を変更します。

      jQuery(this).animate({top:second},250);
    }, function() {
      jQuery(this).animate({top:first},250);
    }).end().end().end().end();

元のソースのままですと、a要素のマウスオーバーで、カーソルがビームになっています。通常の指マークにするには、以下のように、ソース中の.cssで、cursor: 'hand'の要素を追加するとよいです。css追加は3か所ありますが、どこか1箇所でOKです。

    }).append("<span />").find("span").css({
      cursor: 'hand',

クロスブラウザでの調整

scrollovers(JavaScript)と、jQueryのプラグイン版のScrollover(jQuery plugin)を、各ブラウザやバージョン違いで、いろいろ試してみました。

scrollovers(JavaScript)は、scrollovers_StartScrollLocationや、scrollovers_EndScrollLocationTrimにより、SAFARIやOPERAの調整をしているみたいですが、私の環境では、google Chromeでうまく動作しませんでした。

Scrollover(jQuery plugin)では、listの中で高さがずれてしまいました。Safariでは動かないという報告もあります。

原因は、DOCTYPEと各ブラウザのバージョンにより、paddingやmarginの扱い方が違ったり、font-family自体の値や、そのサイズ設定の％、em指定によって、デフォルトのfont-sizeが異なるため、scrolloverのスタート位置のズレが主な原因になっているようです。特にIEでは、a要素のhover状態では、親ブロックの高さが変化したりするので、個別に調整が必要になります。

paddingを0にしたり、widthを明示的に指定すれば、おおむね対応できます。しかし、文字フォントによっても調整が必要になってくると、手に負えません。ある程度で見切りをつけたり、他の効果を探すほうが賢明かもしれません。