2008年12月18日

スムーズにアニメーションするテキストリンク

ウェブサイトのリンクについてですが、単なるテキストだとどうしても見栄えが寂しかったりしますよね。
かといって画像リンクにaltを設定するよりはテキストリンクの方が検索エンジンからの評価は高いようですから、SEOを考えるならやっぱりテキストリンクが最善なんだと思います。

テキストリンクだけど少しでも印象を強くしたい方に、今回試してみたスクリプトは結構いいかもしれません^^

たくさん並べるとちょっとおもしろいです。




こちらは画像ですがマウスを乗せるとこんな感じになります。



movelink_t.gif



実践ページはこちら
【jQuery】スムーズにアニメーションするテキストリンクを試してみた

jQueryやprototypeなどの外部ライブラリを使えば、今まで大量のコードを書いて表現していたようなものが結構簡単に出来てしまうので本当にありがたいなぁと思います。

今回のものもあまりに簡単なのでPHPで移動速度と移動時間を変更できるようにしてみました。

PHP部分はあくまで実験用ページの為に作成したものなので必要ない人がほとんどでしょうから本来の動き(Javascript)の部分だけ説明します。(PHP部分が知りたい方は別途説明しますw)


1.jQueryのダウンロード&設置

jQueryのjsファイルはこちらからダウンロード。
ダウンロードしたファイルは任意のディレクトリへアップロードしてください。


2.CSSを記述

適用したいテキストリンクの設定を書きます。
<style type="text/css">
.nudge{display:block; margin:5px 0 5px 0; width:400px;}
</style>


設定内容は適宜変更してください。
私はここではブロック要素、上下のマージン、リンク幅を設定しました。(テキストリンクのベースの設定は別のCSSでしてあります)


3.jQueryを読み込むタグと実際の動作部分を記述


jQuery読み込み
<script type="text/javascript" src="(アップロードしたディレクトリ)/jquery-1.2.6.min.js"></script>


動作部分
<script type="text/javascript">
<!--
$(document).ready(function() {
$('a.nudge').hover(function(){ //mouse in
$(this).animate({ paddingLeft: '100px' }, 500);
}, function() { //mouse out
$(this).animate({ paddingLeft: 0 }, 500);
});
});
//-->
</script>


動きを変えるために変更する箇所は
・移動距離 100px
・移動速度 500(2箇所)
です。

実際にどう変わるかは
【jQuery】スムーズにアニメーションするテキストリンクを試してみた
こちらで距離と速度を変更してみてください。


4.aタグの設定

通常のテキストリンクにclass="nudge"を追加します。
例:
<a class="nudge" target="_blank" href="http://hoge.com/hogeracho.html">テキストリンク文字列</a>


設定は以上です。


5.最後に


動きを作るものなので動きの感想になりますが、かなりスムーズにうねうねと動きますね。

実践ページはリンクが10個ほどですが、もっとたくさん配置して上下にマウスを動かすともっとおもしろそう(笑)

それと、リンクひとつに対して1回の動きが終わる前にマウスを一回離して再び乗せると次の動きがストックされます。
なのでリンクが並んでいる所でマウスを上下に何回か往復させると、マウスを離してもしばらく動き続けます。

テキストリンクに普通のhoverを設定しただけではつまらない方におすすめです^^

何かしら参考になりましたらクリックをよろしくお願いします
にほんブログ村 IT技術ブログへ   人気ブログランキング    
この記事へのコメント
こんにちは〜トモヒロさん
いつも的確なアドバイスありがとうございます。

こういった遊び心も入れながら楽しみながらサイト運営するのも楽しそう♪

いつも勉強になります。

Posted by 愛美 at 2008年12月22日
特に強調したい
リンクなんかに良さそうですね♪

でも、こり出しちゃうと
とことん、やってしまう
タイプなので・・・
導入は見送ります。 m(_ _*)m

また、面白い情報を
楽しみにしています。
Posted by 葵 at 2008年12月22日
こんにちはー。
アニメーション動きがスムーズでいいですね!
実はわたしの今のブログのトップ絵は
雪が降るアニメーションのはずだったんですが
失敗してしまいアニメになりませんでした。笑
残念!
相変わらずカタツムリ速度であれこれ試行錯誤しています。
これからもよろしくです。
メリークリスマス!
Posted by penpen at 2008年12月25日
>> 愛美さん
愛美さんのブログを読んでSEOについてするべきことを再確認させていただいています^^
こちらこそありがとうございます。
>遊び心
すごく大切な事だと思います。
このブログの左サイドバー「ウェブ技術の実践」にも実際に組み込んでみました^^

>> 葵さん
時間が空いた時にでも試してみてください^^
ウェブサイトに使えそうな技術はこれからも実践してレポートしていく予定です。

>> penpenさん
アニメーション動きませんでしたか。
多分ちょっとしたことが原因なんでしょうね。。
いつの日かしんしんと降り積もる雪のアニメーションになっている事を楽しみにしています^^


Posted by トモヒロ at 2008年12月25日
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。