jQuery を使って文字を入力しているようにアニメーション表示してみた

公開日| 2012年11月8日   更新日| 2012年11月19日   コメントはありません。

今回は、jQuery を使って文字を入力しているようにアニメーション表示してみたいと思います。

サイトトップに広告や重要情報を表示するのに使われているもので、タイプライターで文字を入力しているようなものやコンソールから文字入力しているように見せるものなどがそれです。

有名なプラグインでは、

などがあります。

今回は、上記のプラグインは使いません。非常に便利な反面、機能が多すぎて持て余してしまいそうです。

そこでは、今回は、jQuery News Ticker のやり方をまねて自力で作成してみます。

以下は、その例です。


 

1番目の文字列です。ここまでスライドが必要です。

2番目の文字列です。文字が変わっていきます。

3番目の文字列です。今度は、色を変えてみました。

4番目の文字列です。リンクもできます。ここをクリックしてもこのページが表示されるだけです。

5番目の文字列です。これで表示したい文字列のリストは終わりです。次は、最初に戻ります。


この例を元に簡単に解説してみます。(上記例は、わかりやすいように幅が変わってます。)

jQuery を使って文字を入力しているようにアニメーション表示してみる

jQuery の animate を使ってスライドしているだけですけど、なんとなくタイプしているように見えませんか?

何はともあれ、単純に animate 使っているだけなので、コードを見た方が早いでしょう。

先の例のCSS、HTML、JavaScriptのそれぞれのコードを以下に示します。


CSS

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
#typing_frame {
	background-color:#888;
	padding:5px;
}
#typing_view {
	position: relative;
	background-color:#fff;
	height:24px;  /* p.news_sample のfont-sizeとpaddingから算出 */
	padding:5px 5px 0 5px;
	margin:0;
}
#cursol_slider { 
	display: none;
	position: absolute;
	background-color:#fff;
	z-index: 100;
	height:auto;
	padding:0;
	margin:0;
}
p.news_sample {
	position: absolute;
	display: none;
	padding:2px 0 0 0;
	margin:0;
	font-size:12px;
}
 

HTML

1
2
3
4
5
6
7
8
9
10
11
<div id="typing_frame">
<div id="typing_view">
	<div id="cursol_slider"><span style="border-left:2px solid #000;">&nbsp;</span></div>
	<p class="news_sample">1番目の文字列です。ここまでスライドが必要です。</p>
	<p class="news_sample">2番目の文字列です。文字が変わっていきます。</p>
	<p class="news_sample"><font color="red"><b>3番目の文字列です。今度は、色を変えてみました。</b></font></p>
	<p class="news_sample">4番目の文字列です。リンクもできます。<a href="">ここをクリック</a>してもこのページが表示されるだけです。 </p>
	<p class="news_sample">5番目の文字列です。これで表示したい文字列のリストは<b>終わり</b>です。次は、最初に戻ります。</p>
</div>
</div>
 

4行目 – 8行目: それぞれが順番に1行ずつタイプされたように表示されます。


JavaScript

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<script type="text/javascript">
/* <![CDATA[ */
jQuery(function($){
	var max_news = 0;	//	Pタグの文字情報の数(個数)
	var newsno = 1;	//	Pタグの表示する位置
	var status = 0;	//	表示制御ステータス番号(全体を 3秒 x 3 =10秒で切り替える )
 
	//	PタグのIDを設定、また、Z表示位置を指定する
	$('#typing_view p').each(function(i){
		$(this).attr('id','news_element' + (i+1));
		$(this).attr('z-index', (i+1));
		max_news = i+1;
	});
 
	//フェードを実行
	setInterval(
		function(){
			//表示制御
			var frame  = $("#typing_view");
			var target = $("#news_element"+newsno);
			var slider = $("#cursol_slider");
 
			var offset   = target.offset();
			var offset_p = frame.offset();
			var width    = target.width();
			var height   = target.height() + 2;
 
			if(status==0){
				//	初期設定:全体を表示する
				frame.css( { width:'auto' });
				slider.css( { width: 'auto',height:'auto' });
				target.show();
				slider.show();
				width    = target.width();
				height   = target.height() + 2;
				slider.css( { width: width,height:height });
				//	動きがわかりやすいようにあえて表示幅も変更しています。
				frame.css( { width: width+10,height:height+8 });	
			//	frame.css( { height:height+8 });	//	widthを調整しないければ同じ表示幅になります。
 
			} else if(status==1){
				//	タイプアニメ:スライドさせてタイプしているようにみせる
				slider.animate( { width: 0,left: width+10 },{ duration: 1500});
 
			} else if(status==2){
				//	最終処理:全体を非表示にして、次の文字列へ切り替える
				slider.hide();
				slider.css( { left:offset.left-offset_p.left });
				target.fadeOut(2000);
				newsno++;
				if(newsno>max_news){
					newsno=1;
				}
			}
			status++;
			if(status>2){
				status = 0;
			}
		}
		,3000);	//	3s間隔で表示状態を変更する
 
	//カーソルの点滅を実行
	setInterval(
		function(){
			$('#cursol_slider span').is(":hidden") ? $('#cursol_slider span').show():$('#cursol_slider span').hide();
		}
		,500);	//	500ms間隔で点滅させる
});
/* ]]> */
</script>
 

38行目: ここでは あえて わかりやすいように幅を変更しています。 本番では、グチャグチャと表示幅が動くのは止めたい方もいらっしゃると思います。 38行目をコメントアウトし、39行目を生かすことで表示幅は固定化され、見やすくなると思います。


上記のポイントは、status のフラグで順番にタイマー起動時に順番に

0 : 初期化(1行の表示幅を調整) → 1 : 文字入力されているようにアニメで表示 → 2 : 文字をフェードアウトで消す(次の行へ (0 へ))

この繰り返している点です。


簡単でしょ?

なるべくわかりやすく書いたつもりだったのですが、ちょっと長くなりましたね。jQueryの達人なら、この半分程度で書いてしまうくらい簡単なコードです。

タイマーをいじれば、自分なりのタイプライターもどきのアニメーションができあがると思います。お試しあれ。


コメント

口コミ・評判を投稿 :

ブラウザの JavaScriptが無効となっている場合、コメントの投稿はできません。
コメントを投稿するには、JavaScriptを有効にしてください

お名前 *

メールアドレス *
(口コミ・評判欄には、表示されませんが入力が必要です。)

サイトアドレス



  • はてなブックマークへ追加する
  • Facebookでシェアする
  • twitter でつぶやく
  • Google Plusでシェアする
  • Pocketでシェアする
ページトップへ