POPSブログ

jQuery タイプライターアニメーション

367

  Category:  jquery2015/09/17 pops 

タイプライターの様に1文字づつテキストをアニメーションさせます。「前ページ」等のテキスト分割アニメーションと同じです。
jQueryのみと、transit.js使用のものと2例を比較して見ます。

 

ご注意、IE10以上のモダンブラウザでご覧ください(Chrome推奨)。IE9およびそれ以前のブラウザではご覧になれません。但し、Android系の動作は不明です。


jQuery タイプライターアニメーション テスト


通常のjQuery処理の場合と、jquery.transit.js処理の場合とでは表示が異なります。
jquery.transit.js処理の場合ではCSS3の回転などを組み合わせることが可能です。
ここでの、通常のjQuery処理の場合は単に文字を増やしてhtmlの機能で単純に表示しているだけです。
(animate()など利用しませんが、アニメーションと呼ぶことにします)


1つの、Html構造中に順次文字を追加してゆけばアニメーションになる理屈です。


<p>テ</p>
<p>テキ</p>
.
.
<p>テキスト文字</p>

各々の文字をスパン要素などで区切れば、文字単位で着色したり、fadeIn()等も可能になります。


<p><span>テ</span><span>キ</span><span>ス</span><span>ト</span><span>文</span><span>字</span></p>

1. テストの概要・通常のjQuery処理
2. jQuery タイプライターアニメーション1 (setTimeout)
3. jQuery タイプライターアニメーション2 (setInterval)
4. jQuery タイプライターアニメーション2B (途中改行)
5. プロンプトを付けた場合 (文字埋め込みタイプ)
6. 1文字取り出す処理
7. jquery.transit.js処理 (CSS3 エフェクトを増やすのも可能)
8. テキストアニメーションの組み合わせデモ (面倒です)


テストの概要


setTimeout処理、setInterval処理等の違いはありますが、皆同じようなものです。最後にjquery.transit.js処理のものを掲載します。


1. 文字数は自由ですが、多ければ処理に時間を要します。。
2. 半角スペースが使用できますが、改行などには対応していません。
3. P要素で表示していますので、勝手に折り返します。
4. Fontの指定はしていませんので、ページに設定のFontが使用されます。
(Font指定は可能ですが、必ず指定Fontで表示される保障は有りません)


通常のjQuery処理


setTimeout処理、setInterval処理と2つのTIME処理がありますが、好みの問題です。
単純な作りですので、説明などは省略します。JSをご覧ください。
文字数に応じてsetTimeout又はsetInterval処理時間設定を変えて調整します。
このページはjquery-1.6.4で動作しています。

 

jQuery タイプライターアニメーション1

「htmlの機能で単純に表示」、jQueryとsetTimeout処理、typing-text01.js
文字「タイプライター」の前後に「半角スペース」をいれています。

 

 

● 右のボタンを押してください。タイプライターアニメーションを実行します。/ タイプ実行

 

HTML JS CSS


<div class="typing-wrap">
	<p id="typing-text" class="typing-block"></p>
</div>
<p>タイプライターアニメーションを実行します。/ <span id="hit-btn" class="my-btn">タイプ実行</span></p>

//setTimeout/typing-text01.js
(function($){

	$(function () {

		var typing_text="jQuery、登録テキストを1文字づつ分解して タイプライター の様に表示するアニメーションです。";

		//タイマー値 50-200
		var typing_time=120;
		var timerID=null;
		var typing_len=typing_text.length;
		var typing_count=0;
		var typing_html="";

		//オブジェクト
		var typing_item=$('#typing-text');

/*
		//遅延start
		setTimeout(function() {
			//typing
			set_typing();
		},2000);
*/

		//クリックstart
		if(typing_len) {
			//クリックアクション
			$('#hit-btn').click(function(){
				//クリア
				clearTimeout(timerID);
				typing_item.html("");
				typing_html="";
				typing_count=0;
				//typing
				set_typing();
			});
		}

		//typing
		function set_typing(){

			//window.setTimeout("呼び出す関数", "待機時間")

			//typing文字があるなら
			if(typing_count < typing_len){
				timerID=setTimeout(show_typing_text,typing_time);
			}else{
				//終了タイマー停止
				clearTimeout(timerID);
			}
		}
		//show
		function show_typing_text(){

			var text=typing_text.charAt(typing_count);//1文字取り出す
			if(text == ' ') {text='&nbsp;'}//Firefox

			//HTML
			typing_html=typing_html+text;
			typing_item.html(typing_html);

			//繰り返し
			typing_count ++;
			set_typing();

		}

	});

})(jQuery);

/*typing*/
.typing-wrap{
display:block;
width:640px;
height:50px;
margin:0;
padding:0;
border:#CCCCCC 1px solid;
background-color:#EEEEEE;
}

#typing-text{
position:relative;
text-align:left;
}
.typing-block{
position:relative;
display:inline-block;
width:640px;
height:auto;
margin:0;
padding:0;
line-height:120%;
}

/*btn*/
.my-btn{
display:inline-block;
width:auto;
height:auto;
padding:5px 2px;
line-height:100%;
text-align:center;
font-weight:bold;
color:#FF0000;
border:#CCCCCC 1px solid;
background-color:#EEEEEE;
cursor:pointer;
}



 

jQuery タイプライターアニメーション2

「htmlの機能で単純に表示」、jQueryとsetInterval処理、typing-text02.js
setIntervalの方が幾分簡単に記述できます。見た目では判別できませんが、時間もsetTimeoutより正確のようです。

 

 

● 右のボタンを押してください。タイプライターアニメーションを実行します。/ タイプ実行

 

HTML JS CSS


<div class="typing-wrap">
	<p id="typing-text2" class="typing-block"></p>
</div>
<p>タイプライターアニメーションを実行します。/ <span id="hit-btn2" class="my-btn">タイプ実行</span></p>

//setInterval//typing-text02.js
(function($){

	$(function () {

		var typing_text="jQuery、登録テキストを1文字づつ分解して タイプライター の様に表示するアニメーションです。";
		//タイマー値 50-200
		var typing_time=120;
		var timerID=null;
		var typing_len=typing_text.length;
		var typing_count=0;
		var typing_html="";

		//オブジェクト
		var typing_item=$('#typing-text2');


/*
		//遅延start
		setTimeout(function() {
			//start
			if(typing_len) {

				//typing文字があるなら
				if(typing_count < typing_len){
					timerID=setInterval(show_typing_text,typing_time);
				}else{
					//終了タイマー停止
					clearInterval(timerID);
				}
			}
		},2000);
*/

		//クリックstart
		if(typing_len) {
			//クリックアクション
			$('#hit-btn2').click(function(){
				//クリア
				clearInterval(timerID);
				typing_item.html("");
				typing_html="";
				typing_count=0;
				//typing
				timerID=setInterval(show_typing_text,typing_time);
			});
		}

		//show
		function show_typing_text(){

			var text=typing_text.charAt(typing_count);//1文字取り出す
			if(text == ' ') {text='&nbsp;'}//Firefox

			//HTML
			typing_html=typing_html+text;
			typing_item.html(typing_html);

			//繰り返し
			typing_count ++;

		}

	});

})(jQuery);

/*typing*/
.typing-wrap{
display:block;
width:640px;
height:50px;
margin:0;
padding:0;
border:#CCCCCC 1px solid;
background-color:#EEEEEE;
}

#typing-text2{
position:relative;
text-align:left;
}
.typing-block{
position:relative;
display:inline-block;
width:640px;
height:auto;
margin:0;
padding:0;
line-height:120%;
}

/*btn*/
.my-btn{
display:inline-block;
width:auto;
height:auto;
padding:5px 2px;
line-height:100%;
text-align:center;
font-weight:bold;
color:#FF0000;
border:#CCCCCC 1px solid;
background-color:#EEEEEE;
cursor:pointer;
}



 

jQuery タイプライターアニメーション2B / 途中改行

「htmlの機能で単純に表示」、jQueryとsetInterval処理、typing-text02b.js


JSの登録テキストに、次のように記載されている場合です。


var typing_text="登録テキスト。<br>折り返し登録テキスト。";

 

● 右のボタンを押してください。タイプライターアニメーションを実行します。/ タイプ実行 (途中改行)

 

JS


<div class="typing-wrap">
	<p id="typing-text2b" class="typing-block"></p>
</div>
<p>タイプライターアニメーションを実行します。/ <span id="hit-btn2b" class="my-btn">タイプ実行</span></p>

//setInterval//typing-text02b.js
(function($){

	$(function () {

		var typing_text="jQuery、登録テキストを1文字づつ分解して タイプライター の様に表示するアニメーションです。<br>火山警戒情報がレベル3に引き上げられました、突然ですがここで折り返します。";
		//brを置換する
		typing_text.replace("<br>","&");

		//タイマー値 50-200
		var typing_time=120;
		var timerID=null;
		var typing_len=typing_text.length;
		var typing_count=0;
		var typing_html="";

		//オブジェクト
		var typing_item=$('#typing-text2b');


/*
		//遅延start
		setTimeout(function() {
			//start
			if(typing_len) {

				//typing文字があるなら
				if(typing_count < typing_len){
					timerID=setInterval(show_typing_text,typing_time);
				}else{
					//終了タイマー停止
					clearInterval(timerID);
				}
			}
		},2000);
*/

		//クリックstart
		if(typing_len) {
			//クリックアクション
			$('#hit-btn2b').click(function(){
				//クリア
				clearInterval(timerID);
				typing_item.html("");
				typing_html="";
				typing_count=0;
				//typing
				timerID=setInterval(show_typing_text,typing_time);
			});
		}

		//show
		function show_typing_text(){

			var text=typing_text.charAt(typing_count);//1文字取り出す
			if(text == ' ') {text='&nbsp;'}//Firefox
			//brを挿入
			if(text == '&') {text='<br>'}//改行
			//HTML
			typing_html=typing_html+text;
			typing_item.html(typing_html);

			//繰り返し
			typing_count ++;

		}

	});

})(jQuery);

/*typing*/
.typing-wrap{
display:block;
width:640px;
height:50px;
margin:0;
padding:0;
border:#CCCCCC 1px solid;
background-color:#EEEEEE;
}

#typing-text2b{
position:relative;
text-align:left;
}
.typing-block{
position:relative;
display:inline-block;
width:640px;
height:auto;
margin:0;
padding:0;
line-height:120%;
}

/*btn*/
.my-btn{
display:inline-block;
width:auto;
height:auto;
padding:5px 2px;
line-height:100%;
text-align:center;
font-weight:bold;
color:#FF0000;
border:#CCCCCC 1px solid;
background-color:#EEEEEE;
cursor:pointer;
}



最初brを置換して、あとでbrを入れます。

1文字づつ取り出していますので、<br> を、使用頻度の低い & などに変換します。(都合が悪い時は別文字にする)


//brを置換する
typing_text.replace("<br>","&");

//brを挿入
if(text == '&') {text='<br>'}//改行

 

 

プロンプトを付けた場合 (文字埋め込みタイプ)

点滅するプロンプトをつけます。好みの問題ですが、少々面倒です。、typing-text03.js

単なる飾りですが、CSS3での点滅がSPAN要素で機能しない為、P要素で構成しています。但し、JSではSPAN要素を点滅出来ます。入力画面では有りませんが凝ったデザインと言うことかな....
文字は埋め込みタイプでテストしています。


次の様に記載されています。後ろがプロンプトに成ります。


<p id="typing-text-p">プロンプトを付けた タイプライター アニメーション です。プロンプトはCSS3で点滅しています。</p><p id="blink-element">|</p>

プロンプトを付けた タイプライター アニメーション です。プロンプトはCSS3で点滅しています。


 

● 右のボタンを押してください。タイプライターアニメーションを実行します。/ タイプ実行 (2秒後実行します)

 

HTML JS CSS


<div class="typing-wrap">
<p id="typing-text-p">プロンプトを付けた タイプライター アニメーション です。プロンプトはCSS3で点滅しています。</p><p id="blink-element">|</p>
</div>
<br class="clear" />
<p>タイプライターアニメーションを実行します。/ <span id="hit-btn3" class="my-btn">タイプ実行</span></p>

//埋め込みtyping//typing-text03.js
(function($){

	$(function(){

		//文字をとりだす
		var strings=$('#typing-text-p').text();
		var textlen=strings.length;
		var typtext="";
		var count=0;
		var timerID=null;
		//一旦消す
		$('#typing-text-p').text("");

//blink-SET/javascript
//var blinkID=setInterval(blink_text,1000);

/*
		if(textlen){
			//clear
			$('#typing-text-p').text("");
			setTimeout(function(){
				//interval
				timerID=setInterval(show_text,50);
			},3000);
		}
*/

		//クリックstart
		if(textlen) {
			//クリックアクション
			$('#hit-btn3').click(function(){
				//クリア
				clearInterval(timerID);
				$('#typing-text-p').text("");
				typtext="";
				count=0;
				setTimeout(function(){
					//interval
					timerID=setInterval(show_text,50);
				},2000);
			});
		}

		//show
		function show_text(){

			if(count < textlen){

				var text=strings.charAt(count);
				//無くともよい
				//if(text == ' ') {text='&nbsp;'}//Firefox

				//加算
				typtext +=text;
				$('#typing-text-p').text(typtext);

				//カウント
				count ++;

			}else{
				clearInterval(timerID);
			}
		}

		//blink
		function blink_text(){
			$('#blink-element').css({'opacity':'1'});
			setTimeout(function(){
				$('#blink-element').css({'opacity':'0'});
			},500);
		}

	});

})(jQuery);

/*typing*/
.typing-wrap{
display:block;
width:640px;
height:50px;
margin:0;
padding:0;
border:#CCCCCC 1px solid;
background-color:#EEEEEE;
}
#typing-text-p{
display:inline-block;
background-color:#EEEEEE;
float:left;
}

@keyframes blink {
  75% { opacity: 0.0; }
}
@-webkit-keyframes blink {
  75% { opacity: 0.0; }
}
#blink-element {
display:inline-block;
font-weight:bold;
float:left;
text-align:center;
animation: blink 1s step-end infinite;
-webkit-animation: blink 1s step-end infinite;
}

/*btn*/
.my-btn{
display:inline-block;
width:auto;
height:auto;
padding:5px 2px;
line-height:100%;
text-align:center;
font-weight:bold;
color:#FF0000;
border:#CCCCCC 1px solid;
background-color:#EEEEEE;
cursor:pointer;
}



 

文字の登録をJSにせず、対象のP要素に記述された文字を取り出して処理しました。
あとは、表示する時のタイミングをどうするかですが、ページ構成状況により違うと思います。


//文字をとりだす
var strings=$('#typing-text-p').text();

//取り出したあとに消去する
$('#typing-text-p').text("");

P要素のためフロートしています。

SPAN要素ではCSS3で点滅しません。よってP要素で構成してフロートしています。またそれをDIVでラップしています。
clearクラスに注意ください。


<div class="typing-wrap">
<p id="typing-text-p">埋め込みテキストを記述する。</p><p id="blink-element">|</p>
</div>
<br class="clear" />

--------------------------------------------------

.clear {clear: both;}

面倒だ、「チカチカ」するのが好きな、病気の方向けです。


 

JSでP要素またはSPAN要素を点滅させる


//blink-SET/javascript
var blinkID=setInterval(blink_text,1000);

//blink
function blink_text(){
	$('#blink-element').css({'opacity':'1'});
	setTimeout(function(){
		$('#blink-element').css({'opacity':'0'});
	},500);
}

 

1文字取り出す処理

1文字取り出す方法は沢山あるとおもいますが、charAt()を使用しています。
substr()を使用しても構いません。
複数文字、あるいは位置を指定して取り出したりすれば、アニメ形態も多様になります。


//charAt
var tx=typing_text.charAt(i);

//substr
var tx=typing_text.substr(i,1);

 

jquery.transit.js処理


上に、jQuery単独のものを掲載しましたが、少々面倒ですけれど本題はこちらです。

jquery.transit.jsを使用したテキストアニメーションです。「前ページ」よりも単純になっています。
一文字づつ表示しますので、タイプライター形式と同じですが色々なエフェクトを実行出来ます。
タイプライター風テキストアニメーションと言えます。


jQueryプラグイン、jquery.transit.js、の事前読み込みが必要です。IE10以上のモダンブラウザ対応ですが、Android系の動作は不明です。

動作には、jquery.transit.jsが必要です。配布元は下記サイトです。

【参照 DL】ricostacruz.com : jQuery Transit


1. 原則、虹色に染めたり、文字を重ねたりしませんので、z-indexの操作は行いません。
2. 簡単に色々なエフェクトを実行出来ます。回転も可能です。
3. CSS3レーヤー処理ですから、jQuery単独処理よりも動作が軽くなります。
4. 前ページなどの、「分割」アニメーションと原理は同じです。
5. 非常に単純に作っていますので複雑なものは、下記参照ください。


【参照】当方の記事: jQuery CSS3 transit.js使用のテキスト分割アニメーション z-indexの操作

 

この程度のものはjQuery単独でも可能かも知れませんが、より複雑、軽快に動作出来ます。

 

● 右のボタンを押してください。テキストアニメーションを実行します。/ タイプ実行

 

HTML JS CSS


<div id="transit-wrap">
	<p id="transit-text" class="transit-block"></p>
</div>
<p>タイプライターアニメーションを実行します。/ <span id="hit-btn5" class="my-btn">タイプ実行</span></p>

//transition/typing-text05.js
(function($){

	$(function () {

		//アルバイト陰影はtextShadow
		$('#box-title').css({textShadow:'2px 2px 5px #000000'});

		//------------------------------------------------------

		var typing_text="タイプライター アニメーション / jquery.transit.jsを利用し、テキストを1文字づつ分解transitionアニメーションのテストです。ホンマカイナ、ソウカイナ。";
		var typing_speed=400;//transition
		var typing_delay_time=100;//delay

		var typing_len=typing_text.length;
		var typing_count=0;
		var btnflag2=true;

		var typingChip=[];

		//オブジェクト
		var typing_item=$('#transit-text');
		//陰影はtextShadow
		//typing_item.css({textShadow:'0 0 3px #000000'});

		//start
		if(typing_len) {

			set_typing();

			//クリックアクション
			$('#hit-btn5').click(function(){

				if(btnflag2){

					//クリアスケール0
					for (var i=0; i < typing_len; i++) {
						typingChip[i].css({scale:[0,0]});
					}
					//表示
					show_typing_text();
				}else{
					return false;
				}

			});
		}

		//typing
		function set_typing(){

			var typing_html="";
			//spanで造成
			for (var i=0; i < typing_len; i++) {

				//charAt
				var tx=typing_text.charAt(i);//1文字取り出す

				if(tx == ' ') {tx='&nbsp;'}//Firefox

				//HTML連結/Fontクラス記載
				typing_html=typing_html + '<span id="'+ 'transit-text'+ i + '" class="transit-chip">'+ tx +'</span>';

			}
			//apend
			typing_item.html(typing_html);
			//オブジェクト保存
			for (var i=0; i < typing_len; i++) {

				typingChip[i]=$("#transit-text"+i);//オブジェクト保存
				typingChip[i].attr('no',i);//スパン番号取得用

				//クリア/スケール0
				typingChip[i].css({scale:[0,0]});

			}

		}

		//show
		function show_typing_text(){

			btnflag2=false;

			var typing_delay=[];
			typing_count=0;	

			//初期CSS設定値
			var pos_x_v=50;//x
			var pos_y_v=0;//y
			var scale_v=1;//伸縮
			var rotate_v=0;//回転
			var alpha_v=0;//透明度

			for (var i=0; i < typing_len; i++) {
				//css移動
				typingChip[i].css({translate:[pos_x_v,pos_y_v],rotate:rotate_v,scale:[scale_v,scale_v],'opacity':alpha_v});
				//delay
				typing_delay[i]=i*typing_delay_time;
			}

			//遅延はあったほうがよい
			setTimeout(function(){

				for (var i=0; i < typing_len; i++) {

					//transition
					typingChip[i].transition({delay:typing_delay[i],translate:[0,0],rotate:0,scale:[1,1],'opacity':1},typing_speed,"linear",function(){

						typing_count ++;
						//終了
						if(typing_count == typing_len) {finsh_typingAll();}
					});
				}

			},500);

		}
		//finsh
		function finsh_typingAll(){
			//
			btnflag2=true;

			setTimeout(function(){
				//for (var i=0; i < typing_len; i++) {
					//typingChip[i].transition({scale:[0,1]});
				//}
			},2000);

		}

	});

})(jQuery);

/*transit*/
#transit-wrap{
display:block;
width:640px;
height:200px;
margin:0;
padding:0;
text-align:center;
border:#CCCCCC 1px solid;
background-image:url("/main/images/sky_03.jpg");
background-position:50% 50%;
background-color:#EEEEEE;
overflow:hidden;
}

/*transit-typing*/
#transit-text{
position:relative;
top:110px;left:0px;
text-align:left;
}
.transit-block{
position:relative;
display:inline-block;
width:600px;/*320px auto*/
height:auto;
margin:0;
padding:0;
line-height:120%;
}

.transit-chip{
display:inline-block;
width:auto;
height:auto;
margin:0;
padding:0;
font-size:16px;
font-weight:bold;
color:#333333;
}

/*btn*/
.my-btn{
display:inline-block;
width:auto;
height:auto;
padding:5px 2px;
line-height:100%;
text-align:center;
font-weight:bold;
color:#FF0000;
border:#CCCCCC 1px solid;
background-color:#EEEEEE;
cursor:pointer;
}



1文字取り出す処理
charAt()を使用していますが、substr()を使用しても構いません。
半角スペースは変換(&nbsp)しないとFirefoxで認識しませんので注意ください。


(下記図は他の所の再利用ですのでストリング名の違い有り)

zuzuzuzu

 


for (var i=0; i < typing_len; i++) {
	//charAt
	var tx=typing_text.charAt(i);//1文字取り出す
	if(tx == ' ') {tx='&nbsp;'}//Firefox
}

必要ではないが、後ろから取り出す
charAt(typing_len-1-i);

jquery.transit.jsを使用したテキストアニメーションの説明

各文字の x y は 0 0 に成りますので、値を変えれば移動方向などが違ってきます。スケール、角度なども設定可能です。
文字数の多い場合は「文字の出現間隔の時間」を小さくします。



移動などのtransition(アニメ)の時間
var typing_speed=400;//transition

文字の出現間隔の時間
var typing_delay_time=100;//delay

その他の設定、下記を変更ください。 初期、x y は 0 0 に成りますので、pos_x_v=50 は「右50ピクセル」の所から出現します、マイナス値は反対方向になります。


//初期CSS設定値
var pos_x_v=50;//x
var pos_y_v=0;//y
var scale_v=1;//伸縮
var rotate_v=0;//回転
var alpha_v=0;//透明度

フェードがハッキリしない場合
「出現間隔」が小さいので、イージングが合いません。設定無しでは ease です。
linear にすれば少し改善されますので、デモでは linear にしています。


フェードがハッキリしない
//transition
typingChip[i].transition({....},速度,function(){
	//
});

linearにすれば少しまし
//transition
typingChip[i].transition({....},速度,"linear",function(){
	//
});

 

テキストアニメーションの組み合わせデモ


3種類のテキストアニメーションを組み合わせてものですが、大変煩雑で判り難い仕様となっています。
AS3、Canvasであっても、テキストアニメーションは煩雑なので大変不評で有り興味を持つ人は皆無に近い。自由にFontの指定が出来ない故なおさら敬遠されるようです。
デモJSを見れば一目瞭然、「作る」も「使う」も「アホウ、面倒」きわまりない。どうぞ笑ってやってください。


zu

 

jquery.transit.jsを使用したテキストアニメーションの組み合わせです。

正月用、豪華3段重ね。上にミカン、イセエビなど飾ればよりオイシク成ります。

DEMO-027


 


 

CSS3 transit.js使用のものは、下記参照ください。

【参照】当方の記事: jQuery CSS3 transit.js使用のテキスト分割アニメーション z-indexの操作

【参照】当方の記事: jQuery CSS3 transit.js使用のテキスト分割アニメーション


 

面倒な場合、世間には、プラグインが山ほどあるようですが、... 以上です。

 


[ この記事のURL ]


タグ:jquery , Transition , css3

 

ブログ記事一覧



[1]