jQueryでテキストリンクのマウスオーバー時に動きをつける

どのサイトにも必ずあるテキストリンク。それをもう少しおしゃれに表示できないかな?ということでjQueryでアニメーションをつける方法を紹介します。下のアンダーラインからペロッとでてくるので、うるさすぎず、アクセントになると思います!


↑私が10年以上利用している会計ソフト!

IE6+, Firefox 3+, Safari4で動作確認済です。

サンプル

See the Pen Text link – animation hover effect by Mana (@manabox) on CodePen.

必要ファイルをダウンロードする

必要なJavaScriptファイルを下記よりダウンロードします。

背景画像を作る

マウスオーバー時に表示したい背景色を選択し、適当な大きさで塗りつぶします。

コーディング

外部ファイル

<head>内にダウンロードしたファイルを読み込ませます

<script type='text/javascript' src='/sample/js/jquery.js'></script>
<script type='text/javascript' src='/sample/js/jquery.color.js'></script>
<script type='text/javascript' src='/sample/js/jquery.backgroundPosition.js'></script>

JavaScript

お好みでマウスオーバー時の色とアニメーションの速さの設定を変更します

$(function() {
    $("#link_bg a").hover(function() {
        $el = $(this);
        $el.stop().animate({ backgroundPosition: "(0px 0px)", color: "#fff" }, 500); // マウスオーバー時の文字色とアニメーションの速さ
    }, function() {
        $el = $(this);
        $el.stop().animate({ backgroundPosition: "(0px 100px)", color: "#3cf" }, 500); // マウスオーバー後の文字色とアニメーションの速さ
    
    });
});

CSS

CSSでマウスオーバー時に現れる背景の設定をします。backgroundの初期ポジションを100pxにすることで通常時は背景を隠しておきます。

#link_bg a {
		text-decoration: none;
		border-bottom: 1px solid #3cf;
		background: url(/sample/images/link_bg.png) 0 100px no-repeat;
		overflow: hidden;
}

HTML

あとは指定したID内にテキストリンクをはるだけです!

<p id="link_bg">
この中に<a href="#">テキストリンク</a>をはります。
アニメーションがあるとサイトのアクセントになりますね!
<a href="#">背景色</a>を変えたり、<a href="#">透明度</a>を変えたり、<a href="#">アニメーション</a>の設定を変えて
いろんなバリエーションができそうです!
</p>

ぜひ試してみてください!

シェアする

コメント

“jQueryでテキストリンクのマウスオーバー時に動きをつける” への6件のフィードバック

  1. iB より:

    Good Jobですっ☆

    つかわさせていただきます!

  2. あーや より:

    jquery.color.jsファイルのダウンロードの仕方がわかりません(+o+)

    バカでごめんなさい。。教えてください

  3. Webクリエイターボックス より:

    @あーやさん
    上記リンクからコードをコピペして保存してください :)

  4. […] jQueryでテキストリンクのマウスオーバー時に動きをつける記事元のサイト:Webクリエイターボックス このサイトはJavaScriptがオンになっていないと正常に表示されませんjQueryでテキストリンクのマウスオーバー時に動きをつける2010年03月16日jQueryどのサイトにも必ずあるテキストリンク。それをもう少しおしゃれに表示できないかな?ということでjQueryでアニメーションをつける方法を紹介します。下のアンダーラインからペロッとでてくるので、うるさすぎず、アクセントになると思います!IE6+,Firefox3+,Safari4で動作確認済です。サンプル必要ファイルをダウンロードする必要なJavaScriptファイルを下記よりダウンロードします。jquery.jsjquery.color.jsjquery.backgroundPosition.js背景画像を作るマウスオーバー時に表示したい背景色を選択し、適当な大きさで塗りつぶします。コーディング外部ファイル<head>内にダウンロードしたファイルを読み込ませます<scripttype='text/javascript'src='/sample/js/jquery.js'></script&gt …続きを読む […]

ニュースレター

Web制作の最新情報やWebクリエイターボックスからのお知らせ、中の人の近況等を定期的にお送りいたします。 ぜひご登録ください!もちろん無料です! :)