2019年は動画元年と言われるほど、動画に注目が集まっています。
しかし、動画のような「動きのある」モノがブームになっているのは映像作品だけではありません。
WEB業界でもアニメーションなどの動きのあるWEBサイトが多くなってきています。
今後は、このような流れを受けてWEBサイトも動きを中心とした演出がメインになってくる可能性があります。
なので、今回はWEBサイトで動きをだすたための方法であるCSSアニメーションやCanvasの使用方法を紹介します。
CSSアニメーションの特徴
CSSアニメーションはその名前通りCSSだけで実装できるアニメーションです。
Canvasなどはjavascriptなどの知識が必要になりますが、CSSアニメーションはCSSだけの知識で実装できるのがメリット。
WEBサイトのレイアウトを整えるためのCSSとは、少し違うプロパティなどを覚える必要はありますがCSSを使える方ならすぐに覚えて使用できます。
簡単なサンプルコードから見ていきましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
<style>
.sample p {
padding-right:300px;
display:inline-block;
animation-name: test;
animation-timing-function: linear;
animation-duration: 4s;
animation-iteration-count: infinite;
}
@keyframes test {
0% { transform: translate(0%);}
100% { transform: translate(100%);}
}
</style>
<div class="sample">
<p>CSSアニメーション</p>
</div>
</body>
</html>
上記のコードを表示させると、このようになります。
このコードを記述すると、「CSSアニメーション」という文字列が左から右に流れるようになります。
ここで記載されているプロパティを1つずつ紹介します。
「animation-name」プロパティは、キーフレームアニメーションを使用する際に使うプロパティです。
animation-nameの後にキーフレームアニメーションで設定したアニメーションの名前を記述することでアニメーションが適用されます。
今回のキーフレームアニメーションでは「test」という名前を設定しているので、「animation-name: test;」と記述するとtestで設定したアニメーションが適用されます。
キーフレームアニメーションはアニメーションの進行に合わせてスタイルを変更することが可能です。
今回のキーフレームアニメーションでは、このように記述しています。
@keyframes test {
0% { transform: translate(0%);}
100% { transform: translate(100%);}
}
アニメーション開始時点(0%)では「transform: translate(0%);」、終了地点(1000%)では「transform: translate(100%);」と設定しています。
これで「CSSアニメーション」という文字列移動するようになります。
「animation-timing-function」はアニメーションの進行割合を指定するプロパティです。
サンプルコードでは「liner」を設定しており、一定スピードで変化するようにしています。
「animation-duration」プロパティは、アニメーションの長さを指定します。
今回の場合は、「animation-duration: 4s;」と設定してアニメーションの長さを4秒に設定。
「animation-iteration-count」プロパティは、アニメーションの繰り返しを設定するためのプロパティです。
今回の場合では、「animation-iteration-count: infinite;」と記述してアニメーションを無限に繰り返すように設定しています。
上記のアニメーションで使用したプロパティは以上です。
ここからは、サンプルコードを少し変化させてどのようにアニメーションが変化するかを見ていきましょう。
まずは、サンプルコードに「animation-direction」プロパティを追加します。
「animation-direction」プロパティはアニメーションを再生する方向を指定できるプロパティです。
サンプルコードに「animation-direction: reverse;」を追加するとアニメーションの方向が逆になります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
<style>
.sample p {
padding-right:300px;
display:inline-block;
animation-name: test;
animation-timing-function: linear;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-direction: reverse;
}
@keyframes test {
0% { transform: translate(0%);}
100% { transform: translate(100%);}
}
</style>
<div class="sample">
<p>CSSアニメーション</p>
</div>
</body>
</html>
「animation-direction: alternate;」を記述すると順方向と逆方向の交互にアニメーションを再生します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
<style>
.sample p {
padding-right:300px;
display:inline-block;
animation-name: test;
animation-timing-function: linear;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes test {
0% { transform: translate(0%);}
100% { transform: translate(100%);}
}
</style>
<div class="sample">
<p>CSSアニメーション</p>
</div>
</body>
</html>
また、キーフレームアニメーションの内容を変化させるとアニメーションする方向を変化することも可能です。
下記のコードでは、横に移動していたアニメーションを縦に移動するように変化させています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
<style>
.sample p {
padding-bottom: 300px;
display:inline-block;
animation-name: test;
animation-timing-function: linear;
animation-duration: 4s;
animation-iteration-count: infinite;
}
@keyframes test {
0% { transform: translateY(0%);}
100% { transform: translateY(100%);}
}
</style>
<div class="sample">
<p>CSSアニメーション</p>
</div>
</body>
</html>
具体的には、「padding-bottom: 300px;」を追記して移動させる方向を横から縦に変化させるために以下のコードを追記しました。
@keyframes test {
0% { transform: translateY(0%);}
100% { transform: translateY(100%);}
}
また、「animation-iteration-count: 3;」にするとアニメーションが3回繰り返したところでアニメーションがストップします。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
<style>
.sample p {
padding-bottom: 300px;
display:inline-block;
animation-name: test;
animation-timing-function: linear;
animation-duration: 4s;
animation-iteration-count: 3;
}
@keyframes test {
0% { transform: translateY(0%);}
100% { transform: translateY(100%);}
}
</style>
<div class="sample">
<p>CSSアニメーション</p>
</div>
</body>
</html>
「animation-timing-function」でアニメーションの進め方を変化させる値は大きく分けるとこのようなモノがあります。
・ease・・・アニメーションの開始時と終了時の近くでゆっくり変化します。
・ease-in・・・アニメーションの開始時はゆっくり変化して、終了時の近くで早く変化します。
・ease-out・・・アニメーションの開始時は早く変化して、終了時の近くでゆっくり変化します。
・ease-in-out・・・アニメーションの開始時と終了時の近くでとてもゆっくり変化します。
・liner・・・一定で変化します。
さらに細かく分けると、このようなモノがあります。
・easeInSine・・・アニメーション開始時はゆっくりで後で一定
・easeOutSine・・・アニメーション終了時は他は一定
・easeInOutSine・・・アニメーションの開始時と終了時近くだけゆっくり
・easeInCirc・・・アニメーション開始時はとてもゆっくりで中盤から早く変化する
・easeOutCirc・・・アニメーション開始時は早く変化して、中盤からゆっくり変化する
・easeInOutCirc・・・アニメーション開始時と終了時はとてもゆっくりで中盤だけ早く変化する
CSSアニメーションでよく使用するプロパティは以上です。
これらのプロパティを使用することでCSSアニメーションを実装できます。
CSSだけでアニメーションを実装できるので、初心の方やCSSの知識があまりない方も使うことが可能です。
次は、Canvasの実装について説明します。
Canvasを使用するためには、「canvas」というタグを使用します。
<canvas id="canvas">
Canvasに対応していないブラウザです。
Canvasに対応したブラウザを使用してください。
</canvas>
「canvas」というタグに「canvas」というidを設定して、このようなスタイルを適用させます。
<style>
#canvas{
width: 400px;
height: 200px;
background: #eee;
}
</style>
<canvas id="canvas">
Canvasに対応していないブラウザです。
Canvasに対応したブラウザを使用してください。
</canvas>
次にCanvasを使用するためにjavascriptを記述します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
<style>
#canvas{
width: 400px;
height: 200px;
background: #eee;
}
</style>
<canvas id="canvas">
Canvasに対応していないブラウザです。
Canvasに対応したブラウザを使用してください。
</canvas>
<script>
var draw = () => {
var canvas = document.getElementById('canvas');
if (!canvas || !canvas.getContext) {
return;
}
var ctx = canvas.getContext('2d');
};
window.onload = () => {
draw();
};
</script>
</body>
</html>
すると、このように表示されます。
次にCanvasのメソッドを使って図形を描画していきます。
以下のサンプルコードでは、fillRectを使って四角形を描画します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
<style>
#canvas{
width: 400px;
height: 200px;
background: #eee;
}
</style>
<canvas id="canvas">
Canvasに対応していないブラウザです。
Canvasに対応したブラウザを使用してください。
</canvas>
<script>
var draw = () => {
var canvas = document.getElementById('canvas');
if (!canvas || !canvas.getContext) {
return;
}
var ctx = canvas.getContext('2d');
ctx.fillRect(20, 20, 30, 30);
};
window.onload = () => {
draw();
};
</script>
</body>
</html>
ブラウザで表示すると、このようになります。
「fillRect」メソッドを使うことで塗りつぶした図形を描画できます。
また、これと同じような図形を「beginPath」、「moveTo」、「lineTo」、「fill」メソッドを使って描画するとこのようになります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
<style>
#canvas{
width: 400px;
height: 200px;
background: #eee;
}
</style>
<canvas id="canvas">
Canvasに対応していないブラウザです。
Canvasに対応したブラウザを使用してください。
</canvas>
<script>
var draw = () => {
var canvas = document.getElementById('canvas');
if (!canvas || !canvas.getContext) {
return;
}
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(50, 20);
ctx.lineTo(50, 50);
ctx.lineTo(20, 50);
ctx.lineTo(20, 20);
ctx.fill();
};
window.onload = () => {
draw();
};
</script>
</body>
</html>
これをブラウザで表示させるとこのようになります。
「lineTo」メソッド使用することで線を描画して、「fill」メソッドで塗りつぶしすることで同じ図形を描画することも可能です。
また、「clearRect」を使用することで図形の一部をくり抜くことができます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
<style>
#canvas{
width: 400px;
height: 200px;
background: #eee;
}
</style>
<canvas id="canvas">
Canvasに対応していないブラウザです。
Canvasに対応したブラウザを使用してください。
</canvas>
<script>
var draw = () => {
var canvas = document.getElementById('canvas');
if (!canvas || !canvas.getContext) {
return;
}
var ctx = canvas.getContext('2d');
ctx.fillRect(20, 20, 80, 80);
ctx.clearRect(40, 40, 30, 30);
};
window.onload = () => {
draw();
};
</script>
</body>
</html>
「clearRect」メソッドは、消しゴムのように使用できます。
ブラウザで表示させると、このようになります。
また、「strokeRect」メソッド枠線の図形を描画できます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
<style>
#canvas{
width: 400px;
height: 200px;
background: #eee;
}
</style>
<canvas id="canvas">
Canvasに対応していないブラウザです。
Canvasに対応したブラウザを使用してください。
</canvas>
<script>
var draw = () => {
var canvas = document.getElementById('canvas');
if (!canvas || !canvas.getContext) {
return;
}
var ctx = canvas.getContext('2d');
ctx.strokeRect(20, 20, 30, 30);
};
window.onload = () => {
draw();
};
</script>
</body>
</html>
ブラウザで確認すると、このようになります。
「arc」メソッドを使用することで円弧描画できます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
<style>
#canvas{
width: 400px;
height: 200px;
background: #eee;
}
</style>
<canvas id="canvas">
Canvasに対応していないブラウザです。
Canvasに対応したブラウザを使用してください。
</canvas>
<script>
var draw = () => {
var canvas = document.getElementById('canvas');
if (!canvas || !canvas.getContext) {
return;
}
var ctx = canvas.getContext('2d');
ctx.arc(80, 80, 40, 0, Math.PI*2, false);
ctx.fillStyle = 'rgb(204, 0, 0)';
ctx.fill();
};
window.onload = () => {
draw();
};
</script>
</body>
</html>
これをブラウザで確認すると、このように表示されます。
引数の値はこのようになります。
「arc(中心のx座標, 中心のy座標, 半径, 円弧の開始角度, 円弧の終了角度, 描画の方向(true：時計回り false：反時計回り))」
「円弧の開始角度」や「円弧の終了角度」を変えることで円弧の面積を変えることができます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
<style>
#canvas{
width: 400px;
height: 200px;
background: #eee;
}
</style>
<canvas id="canvas">
Canvasに対応していないブラウザです。
Canvasに対応したブラウザを使用してください。
</canvas>
<script>
var draw = () => {
var canvas = document.getElementById('canvas');
if (!canvas || !canvas.getContext) {
return;
}
var ctx = canvas.getContext('2d');
ctx.arc(80, 80, 40, 0, 180 * Math.PI/180, false);
ctx.fillStyle = 'rgb(204, 0, 0)';
ctx.fill();
};
window.onload = () => {
draw();
};
</script>
</body>
</html>
円弧の終了角度を変えることで、このように半円を描画できます。
開始角度と終了角度を変更することで縦に半円を描画できます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
<style>
#canvas{
width: 400px;
height: 200px;
background: #eee;
}
</style>
<canvas id="canvas">
Canvasに対応していないブラウザです。
Canvasに対応したブラウザを使用してください。
</canvas>
<script>
var draw = () => {
var canvas = document.getElementById('canvas');
if (!canvas || !canvas.getContext) {
return;
}
var ctx = canvas.getContext('2d');
ctx.arc(80, 80, 40, 90 * Math.PI/180, 270 * Math.PI/180, false);
ctx.fillStyle = 'rgb(204, 0, 0)';
ctx.fill();
};
window.onload = () => {
draw();
};
</script>
</body>
</html>
ブラウザで確認すると、このように表示されます。
「fillRect」メソッドと「arc」メソッドを使うことで車のシルエットを描画できます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
<style>
#canvas{
width: 400px;
height: 200px;
background: #eee;
}
</style>
<canvas id="canvas">
Canvasに対応していないブラウザです。
Canvasに対応したブラウザを使用してください。
</canvas>
<script>
var draw = () => {
var canvas = document.getElementById('canvas');
if (!canvas || !canvas.getContext) {
return;
}
var ctx = canvas.getContext('2d');
ctx.fillRect(60, 20, 60, 20);
ctx.fillRect(60, 40, 80, 30);
ctx.arc(80, 80, 10, 0, 360 * Math.PI/180, false);
ctx.arc(120, 80, 10, 0, 360 * Math.PI/180, false);
ctx.fill();
};
window.onload = () => {
draw();
};
</script>
</body>
</html>
ブラウザで確認すると、このようになります。
まとめ
いかがでしたか？
CSSアニメーションやCanvasを使用することで、色々な動作を実装できます。
WEBサイトでアニメーションをさせたいときは、CSSアニメーションもしくはCanvasを使って実装してみてください。