テキストをアニメーション表示/コンテンツ表示/SolidStateEveryday - Ajax,javascript,UIサンプルとチュートリアル -

スポンサードリンク

SAMPLE
CODE
DownLoad

<!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> 
<title>Text Effects | Chaining Functions</title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<link class="switch" href="style.css" rel="stylesheet" type="text/css" /> 
<script src="mootools-1.2.1-core-yc.js" type="text/javascript"></script> 
<script src="chaining.js" type="text/javascript"></script> 
</head> 
 
<body> 

<div id="box">
  <h2 id="where" class="saying">Tonight of tonight...</h2> 
  <h2 id="when" class="saying">In my tears</h2> 
  <h2 id="final" class="saying">The moon must become cloudy. </h2> 
</div>
<ul> 
	<li class="sub-header-item">Starting point and terminal</li> 
	<li class="sub-header-item">Animation</li> 
	<li class="sub-header-item">The point there.</li>  
</ul> 
<div class="sub-header-item">It is safe even if parting. </dicv> 
</body> 
</html>

	Chaining Functions in Mootools for Dynamic Text Effects :: this, that, and the other thing

テキストやタグをアニメーションで表示させることができるスクリプト。
実装には、上記ダウンロード先のコード以外に、http://mootools.net/downloadが必要となる。
YUI Compressor のバージョンをダウンロードしておく。

セットアップ
使い方

ダウンロード

製作元に行って、スクリプトのコードをコピーする。
一番最初に出てくるコードがそれ。
それから、http://mootools.net/downloadもダウンロードする。

<head>～</head>の設定

ヘッダーに上記のスクリプトを読み込ませる。

chaining.jsの部分は、外部にまとめてみた結果。

フェードアニメーション

フェードアニメーションは、クラスを設定するだけで使用できる。

<li class="sub-header-item">Would you like to learn</li>

アニメーションしたい箇所のタグに、sub-header-itemをクラスとして設定する。
そうすると、上記クラスを設定した箇所が順番に表示されるようになる。
スクリプトの方でCSSの設定も行うことができる。

function(){item.morph({　
opacity: 1,　
backgroundColor: '#000',　
borderColor: '#000',　
color: '#FFCCCC'});　
}

これらは全てアニメーションの終点。
サンプルでは、外部CSSで全て#FFFに設定してあるが、ここで #FFCCCCと設定することで、
白からピンクにフェードアニメーションをする。
ちなみに背景を定義しとかないと、アニメ字に不恰好になる。

モーションアニメ

モーションは、以下の通りにやる。

<h2 id="where" class="saying">Where you want it ...</h2>　　
<h2 id="when" class="saying">When you want it</h2>　　
<h2 id="final" class="saying">It's easy with Mootools!</h2>　

まず、class="saying"を設定する。これが無いとただのフェードアニメーションになる。
次にそれぞれの動きを決めるため、それぞれにidを定義。
そしてCSSでアニメーションの開始場所を指定する。

h2.saying {
position: absolute;
}
h2#where {left: 0;}
h2#when {right: 0;}
h2#final {left: 272px; top: 80px;}

最後に、スクリプトでアニメの終点を設定する。

fnChain.chain(　
function(){$('where').morph({opacity: 1,left: 120,backgroundColor: '#000',color: '#FFCC00'});},　
function(){$('when').morph({opacity: 1, right: 200,backgroundColor: '#000',color: '#336699'});},　
function(){$('final').morph({opacity: 1,backgroundColor: '#000'});}　
);