olidStateEveryday - Ajax,javascript,UIサンプルとチュートリアル -

Ajax,Javascript、様々な効果を発揮するスクリプトサンプル設置方法

  1. Home>
  2. その他>
  3. リンクアクション>
  4. リンクカラーをアニメーションで変更する

リンクアクションcolorslide.js,mootoolsv111.js

リンクカラーをアニメーションで変更する

スポンサードリンク
  • del.icio.us に登録
  • ライブドアクリップに追加
  • Google Bookmarks に追加
  • はてなブックマークに追加
  • Yahoo!ブックマークに登録
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無題ドキュメント</title>
<script type="text/javascript" src="mootoolsv111.js"></script>
<script type="text/javascript" src="colorslide.js"></script>
<style> 
#nav1,#nav2,#nav3 {
	margin-bottom:10px;
	list-style:none;
}

#nav1 a,#nav2 a,#nav3 a {
	font-size:20px;
	font-weight:bold;
	color:#66CCFF;
	text-decoration:none;
}
#nav1 a span.hover,#nav2 a span.hover,#nav3 a span.hover {
	color:#FF9900;
	cursor:pointer;
	position:absolute;
}
</style> 
</head>

<body>
<ul id="nav1"> 
<li><a href="#">マウスオンでアニメーション</a></li> 
</ul>
<ul id="nav2"> 
<li><a href="#">左からカラー変更</a></li> 
</ul> 
<ul id="nav3"> 
<li><a href="#">右からカラー変更</a></li> 
</ul> 

</body>
</html>

a:hoverの動作をアニメーションするスクリプトcolorslide.js。
ただしカラー限定です。
mootoolsv111.jsを使用し、中央、左、右からリンクカラーを変更できるようになります。
縦方向にも対応しているかと思います。 

ダウンロード/セッティング

まず mootoolsv111.js をダウンロードしてきます。
次にダウンロードタブから製作元のサイトへ行き、colorslide.js のコードをコピーして名前をつけて保存してください。
Fx.CSS.select と始まるボックスに書かれているものが、それですので、
それらの準備が出来たらサーバーへアップロードしてください。

<head>の設定

アップロードしたものを<head>に読み込ませます。

<script type="text/javascript" src="mootoolsv111.js"></script>
<script type="text/javascript" src="colorslide.js"></script>　

パスは任意で調節してください。
次にCSSの設定を行います。
これも製作元サイトにて記述されていますので、これをコピーします。
#nav など書かれている箇所がそれです。
それらを<head>か、外部にまとめて記述します。 

要素のマークアップ

<ul id="nav">
<li><a href="#">マウスオンでアニメーション</a></li>
</ul>　

このように nav と指定されたボックスを用意すれば、それに包括されている<a>要素が対象となり、アニメーションします。

アニメーションの設定

デフォルトでは中央からアニメが開始されるので、これを右や左に変更したい場合はcolorslide.jsを調節します。

左から開始する場合
ファイルの38行目あたりにある、　var mid = Math.round(width / 2)　を　var mid = 0　と変更します。

右から開始する場合
ファイルの38行目あたりにある、　var mid = Math.round(width / 2)　を　var mid = Math.round(width)　と変更します。

他にも縦からなども可能、たぶん斜めも。

関連スクリプト

感想

とてもシンプルなサイトでしたら、アクセントとして良いのではないでしょうか。
メリハリ付いて面白いかと思います。 

スクリプトの使用について

SolidStateEverydayでご紹介しているAjax,Javascript等のスクリプトをご利用になる場合は、必ず製作元のサイトで使用ライセンスを確認してください。ご利用は自己責任でお願い致します。

結局、エックスサーバーなんですよね。