動きのあるサイトの作り方【HTML5&JavaScriptでアニメーション編】

move HTMLコーダー
HTML5で動きのあるサイトを作りたい、そもそもHTML5って何ができるんだろう…
このような疑問にお答えします。

HTML5とは?

HTMLの基礎を既に学び始めている方ならわかると思いますが、単純にHTMLのことです。

5は版を示しており、HTML5になってから基本的なことに加え、audioタグでの音楽の再生やvideoタグでの動画の再生などできることが増えました。

これらのタグとJavaScriptなどを組み合わせることによって、簡単なプレイヤーなら割と簡単に自作できるようになったのです。

ということでまずはHTMLは単純にサイトを構成するもので、HTML5までバージョンアップして色々出来ることが増えてきたという認識をしておけばOKです。

まるっきりHTML自体の学習すら始めていないし意味がわからないよ…

という方は現在無料で学べる色々なものがあるので利用して軽く勉強してみてください。

web

【全部無料】HTML&CSSの学習方法(入門編)を試してみた【初心者向】

2019年6月24日

動きのあるサイトを作る方法

HTML5で動きのあるサイトを作成するにはcanvasタグを利用します。いわゆるアニメーションを作成するような形になります。

今回はサイトにアクセスすると「Welcome!!」というメッセージが1文字ずつ表示されていくという動きを実装したいと思います。

まずは単純にcanvasタグを用いて文字を描画するだけのものを作成してみましょう。

HTML

<canvas id="canvas"></canvas>

JavaScript

const context = document.getElementById('canvas').getContext('2d');
context.font = "48px sans-serif";
context.textAlign = "left";
context.textBaseline = "top";
context.fillText("Welcome!!", 10, 10);

いきなりですがcanvasを用いたアニメーションにはJavaScriptの利用も合わせて行う必要があります。

JavaScriptについて知りたいという方は以下の記事を参考にしてみてください。

code

HTMLコーディングに必要なJacaScript入門|何から学び始めればいい?

2019年7月19日

HTMLではcanvasタグの設定のみ、JavaScriptで文字の描画を行うような形になります。

こちらの例が以下の画像です。
canvas

アニメーションなどは全くなく、ただ文字が描画されただけの形になります。

文字のアニメーションを作る

先ほどの文字が1文字ずつ表示されていくアニメーションを目標にしていきます。

アニメーションを実現するにはrequestAnimationFrameやsetIntervalといった関数を利用するのが一般的のようですが、今回はアニメーション間隔の数字を指定したかったのでsetIntervalを利用してみます。

HTMLに変更はありません。

JavaScript

const canvas = document.getElementById('canvas')
const context = canvas.getContext('2d');
context.font = "48px sans-serif";
context.textAlign = "left";
context.textBaseline = "top";

var count = 1;
function drawText () {
	context.fillStyle = '#ffffff';
	context.fillRect(0, 0, canvas.width, canvas.height);
	context.fillStyle = '#333333';
	context.fillText(count, 10, 10);
	count++;
	if (count > 5) {
    	clearInterval(id);
	}
}
    
var id = setInterval(drawText, 500);

このコードでは単純に1~5までの数字がアニメーションで表示されていきます。要点の部分を解説します。

setInterval(drawText, 500);
500ミリ秒(0.5秒)毎に、drawTextという関数を実行する
]

[
fillStyle = '#ffffff';
fillRect(0, 0, canvas.width, canvas.height);
fillStyle = '#333333';
context.fillText(count, 10, 10);
一度白でキャンバスを塗りつぶしてから、再度黒を指定して新しい文字を描画する
if (count > 5) {
	clearInterval(id);
}

countが5よりも大きい数字になったら繰り返しを終了する、言い換えるとcountが5以下の間繰り返し処理を実行する

もっと遅くアニメーションさせたい場合はsetIntervalの500を1000にしたり、もっと早くしたい場合は200にしたりと調整ができます(単位はミリ秒です:1000ミリ秒=1秒)

これで1から5までの数字をただアニメーションさせることはできました。

文字のアニメーション仕上げ

先ほどの例を元に、今度は「Welcome!!」という文字を1文字ずつ追加してくアニメーションを実装します。

おなじくHTMLに変化はありません。

JavaScript

const canvas = document.getElementById('canvas')
const context = canvas.getContext('2d');
const displayText = 'Welcome!!';
context.font = "48px sans-serif";
context.textAlign = "left";
context.textBaseline = "top";

var count = 1;
function drawText () {
	context.beginPath();
	context.fillStyle = '#ffffff';
	context.fillRect(0, 0, canvas.width, canvas.height);
	context.fillStyle = '#333333';
	context.fillText(displayText.substr(0, count), 10, 10);
	count++;
	if (count > displayText.length) {
    	clearInterval(id);
	}
}
    
var id = setInterval(drawText, 100);
const displayText = 'Welcome!!';

表示したい文字列を設定します。

context.fillText(displayText.substr(0, count), 10, 10);

表示したい文字列を左端から1文字ずつ増やして取得・表示しています。

if (count > displayText.length) {
	clearInterval(id);
}

表示したい文字列の長さ分繰り返すように設定しています。

あとは文字の表示が思いのほか遅く感じたので、setIntervalの数字を100に調整しました。

これで特定の文字列を1文字ずつアニメーションで表示させることが出来ました。以下のような形になります。
welcome

canvasに背景色を指定したり、背景画像を指定したりすることもできます。文字もフォントや色を指定できるので、指定によってはそこそこカッコいいアニメーションを作れるかと思います。

とはいえ文字を1文字づつ出すだけというのも微妙な気がするので、この例をベースにオリジナルな表現方法を考えるのも楽しそうです。

図形を書くことも出来るので、四角い表示枠が伸びていき、伸び切ったところで文字が浮かび上がるみたいな表現も面白そうです。

スライドやカルーセルなど

動きのあるサイトってスライドやカルーセルなんかを期待してたんだけど…

という方には文字列のアニメーションのみの紹介で終了となってしまいましたが、スライドやカルーセルなどの動きのあるサイトの作り方も個別に記事にして紹介させて頂く予定です。

今後もお暇な時にでも覗きに来ていただければ幸いです。