Flashのように文字を繰り返し表示、jQueryで

釣りに行ったおかげで、心地良い疲れを感じている@CyberMameCANです。

“jQuery Lettering Animate” is an extension of the “lettering plugin”, it iterates through each letter separated by the lettering and animates it.
こちらのサイトを参考にFlashのように文字が表示されるようにしてみました。
JavaScriptをのsetTimeoutとtime:のパラメータ値をつかって、１行表示したら次の行、そしてまた次の行・・・と表示していきます。
このプログラムでは２回繰り返しています。

デモ

HTML

<div class="box"  id="example02">
	<p id="title01">hello</p>
	<p id="title02">hola</p>
	<p id="title03">bon giorno</p>
	<p id="title04">guten tag</p>
</div>
<script src="js/jquery-1.6.1.min.js" type="text/javascript" language="JavaScript"></script>
<script src="js/jquery.lettering.js" type="text/javascript" language="JavaScript"></script>
<script src="js/jquery.lettering.animate.js" type="text/javascript" language="JavaScript"></script>
<script>
function Initiaraize() {
	$("#title02").hide();
	$("#title03").hide();
	$("#title04").hide();
	$("#title05").hide();
}
Initiaraize();
var repeat = 2;		// 繰り返す回数
var level = -1;
var lp = 0;
function Parapara() {
	level++;
	switch( level ) {
	case 0:
		$("#title01").show().lettering().animateLetters({top:10,opacity:0},null,{randomOrder:false,time:1000,reset:true});
		break;
	case 1:
		$("#title02").show().lettering().animateLetters({top:5,opacity:0},null,{randomOrder:false,time:1000,reset:true});
		break;
	case 2:
		$("#title03").show().lettering().animateLetters({top:0,opacity:0},null,{randomOrder:false,time:1500,reset:true});
		break;
	case 3:
		$("#title04").show().lettering().animateLetters({top:0,opacity:0},null,{randomOrder:false,time:2000,reset:true});
		break;
	default:
		level = -1;
		if( ++lp < repeat ) {
			Initiaraize();
		}
		break;
	}
	var timerId = setTimeout( Parapara, 3500 );
	if ( lp >= repeat ) {
		clearTimeout( timerId );
	}
}
Parapara();
</script>

<p id="title01">hello</p>

<p id="title03">bon giorno</p>

<p id="title04">guten tag</p>

</div>

function Initiaraize() {

$("#title02").hide();

$("#title03").hide();

$("#title04").hide();

$("#title05").hide();

}

Initiaraize();

var repeat = 2; // 繰り返す回数

var level = -1;

var lp = 0;

function Parapara() {

level++;

switch( level ) {

case 0:

$("#title01").show().lettering().animateLetters({top:10,opacity:0},null,{randomOrder:false,time:1000,reset:true});

break;

case 1:

$("#title02").show().lettering().animateLetters({top:5,opacity:0},null,{randomOrder:false,time:1000,reset:true});

break;

case 2:

$("#title03").show().lettering().animateLetters({top:0,opacity:0},null,{randomOrder:false,time:1500,reset:true});

break;

case 3:

$("#title04").show().lettering().animateLetters({top:0,opacity:0},null,{randomOrder:false,time:2000,reset:true});

break;

default:

level = -1;

if( ++lp < repeat ) {

Initiaraize();

}

break;

}

var timerId = setTimeout( Parapara, 3500 );

if ( lp >= repeat ) {

clearTimeout( timerId );

}

Parapara();

</script>

switch文の所の$(“#title01”)等が入っている行のパラメータを変えれば、文字の表示方法も変化します。

月	火	水	木	金	土	日
« 4月				6月 »
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31

サイバーまめカン鹿児島の出水市でプログラミングしてる人のブログ

MacとSwift, Ruby, Pythonと温い日常。Linuxも少々。