メニュー 閉じる

147. p5.jsでスタイルシートを設定した文字をアニメーションさせてみる03

CSSの「opacity」を変化させてフェードイン・フェードアウト。

http://www.velvet-number.com/p5_test/test104/

var alpha;

var fadein;

function setup () {

	pixelDensity (displayDensity ());
	createCanvas (windowWidth, windowHeight);
	colorMode (RGB, 256);
	background (255);

	alpha = 0;

	fadein = true;

	text_div = createDiv ('Hello World !');
	text_div.style ('opacity', alpha);
	text_div.style ('font-family', 'sans-serif');
	text_div.style ('font-size', '100px');
	text_div.style ('font-style', 'normal');
	text_div.style ('color', '#000000');
	text_div.style ('letter-spacing', '-1px');
	text_div.style ('position', 'absolute');
	text_div.style ('width', '100%');
	text_div.style ('top', height / 2 - 50 + 'px');
	text_div.style ('left', '0px');
	text_div.style ('text-align', 'center');

}

function draw () {

	if (fadein == true) {
		alpha += 0.01;
	} else {
		alpha -= 0.01;
	}

	if (alpha > 1) {
		alpha = 1;
		fadein = false;
	}

	if (alpha < 0) {
		alpha = 0;
		fadein = true;
	}

	text_div.style ('opacity', alpha);

}

Posted in p5.js , processing