忍者ブログ
12  11  10  9  8  7  6  5  4  3  2 

マウスオーバーでリンクをスクロールさせる事ができる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)で、スクロールさせたいリンクに、classtypeを設定するだけです。

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

PR
この記事にコメントする
ツイートボタンブログパーツ

お名前
タイトル
文字色
メールアドレス
URL
コメント
パスワード   Vodafone絵文字 i-mode絵文字 Ezweb絵文字
この記事へのトラックバック
この記事にトラックバックする:
ATOM(RSS)icon ATOM
RSS

myTwitter

ツイートボタンブログパーツ
gogoToRoTAN


Shopping

楽天市場
TV・新聞掲載商品
楽天ランキング
Yahoo!ショッピング
Yahoo!オークション

Amazon.co.jp
Amazon.co.jp ベストセラー
楽天ブックス
楽天ブックス ランキング

旅行

楽天トラベル
航空券(ANA/JAL等)
高速バス
Yahoo!トラベル
じゃらんnet

ブログ内検索
プロフィール
HN:
torotan
性別:
非公開
ブログパーツアクセスランキング
忍者ブログ [PR]