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

thumb_link_jquery

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


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>

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

シェアする

コメント

ニュースレター

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