日別アーカイブ: 2016-02-23

フェードイン・フェードアウト

プログラミング

本業はミュージシャンでした

高度成長期のお笑いグループにクレージーキャッツがおりました。晩年はお笑い芸人が楽器を弾いていると奇異に感じる若者もいたようです。テレビが白黒だったころはテレビ界の寵児（グループ）といわれたものです。

ガチョーンリーダーはハナ肇（ハナはじめ）でしたが、他のメンバーの名も一国一城の主として轟きました。 その一人に谷啓なるトロンボーンの名手がいて、ガチョーンというギャグが一世を風靡しました。テレビでは掛け声とともに画面がフェードイン・フェードアウトを繰り返しました。

このギャグは一般人がやっても面白くなく、当人ならではの芸でした。今回、この芸をテキスト表示に使ってみました。幸いにも大きくなったり小さくなったりを繰り返すのでフェードインとフェードアウトの両方をJavaScriptで実現する方法をマスターできます。

動作の仕組み

動作の仕組みはDIVタグのなかで指定したfont-sizeを一定時間間隔に変更します。定時間後に変更するきっかけはsetTimeoutを用いdocument関数でfont-sizeを置き換えます。



大小の繰り返しは１つの80ピクセル区間を45進んだら35後退し実質10ピクセル増大するように、剰余計算と整数化を駆使してジグザク拡大を計ります。



音声はテキストーク(textalk.exe)でテキストから音声に変換しました。本人の至芸には足元にも及びません。

TokyoMarathon

記事に採用済み

この手法を東京マラソン2016コース案内に織り込みました。

ソースコード

<html>
<head>
<script type="text/javascript" charset="Shift_JIS">
var x=20;
var w=243;
var s=0;
var shout = new Audio();			//AUDIOオブジェクト,早めにロードしておく
shout.src = "https://aidesign.lolipop.jp/wp-content/uploads/2016/02/AUDIO6.mp3";

function start(){
	if(s==0)	shout.play();
	document.all.post_title.style.fontSize=x+'px';
	var v = (s++) % 80;							// 0 or 1
	var u = 1 - Math.floor(v / 45) * 2;			// 1 or -1
	w += u;										// w:243 288 253 298 263 308
	x += u;										// x:20 65 30 75 40 85
	console.log("S=%d V=%d U=%d W=%d X=%d", s, v, u, w, x);
	document.gag.width = w;
	document.gag.height = 63 * w / 243;
	if(s<205)	setTimeout("start()", 30);
}
</script>
</head>
<body>
<input type="button" value="CLICK" onClick="start()"/>　音量は控えめに！
<BR><BR>
</body>
<div id="post_title" width: 780px; height: 400px; style="filter:Alpha(opacity=30);position:absolute;left:20;font-size:5px;color:tomato; border:1px solid blue;">
<img src="https://aidesign.lolipop.jp/wp-content/uploads/2016/02/gachon.png" width="243" height="63" name="gag">
<BR>東京マラソン2016
<Font Size="6" Color="blue"><BR>2016-02-28（日）<BR></Font>
</div>
</html>

実行例






　音量は控えめに！





東京マラソン2016

2016-02-28（日）