Nagashima Laboratory

テキスト + アニメーション（JavaScript）

JavaScriptのWeb Animations APIという機能を使い、テキストの表示にアニメーション効果を加えます。

キーワード：Web Animations API

作成例（完成イメージ）

【準備】フォルダ：javascript_text_animation

①JavaScriptを書くための準備で作成したフォルダ（空のHTML、CSS、JavaScriptが入っている）を準備します。GitHubからもダウンロードできます。

②フォルダの名前を「javascript_text_animation」に変更します

Web Animations APIの使い方

Web Animatios APIは、アニメーションを実装できるJavaScriptの仕様です。開始と終了時の値を指定すると、その間を自動的に補完してアニメーションにして表示することができます（動かす内容のことをキーフレームといいます）。

次のように指定をします。

動かす要素.animate(内容（キーフレーム）, 再生時間);

内容（キーフレーム）と再生時間は下記のようにまとめて書くことができます。

  const keyframes = {
    プロパティ名: ['開始', '終了'],
    プロパティ名: ['開始', '終了'],
  };
  
  const options = {
    プロパティ名: '値',
    プロパティ名: '値',
  };

  要素.animate(keyframes, options);

①フェードイン

▼index.html

  <header>
    <h1>JavaScript Animation</h1>
  </header>
  <main>
    <h2>フェードイン</h2>
    <p class="fade">ゆっくりと文字を表示</p>

▼style.css

h2 {
  padding-top: 3rem;
}

p {
  padding: 1rem;
  box-sizing: border-box;
  font-weight: bold;
}

.fade {
  opacity: 0;
}

JavaScriptで文字を表示させるため、CSSで文字を透明（不透明度 0）にしておきます。

▼script.js

// フェード
const fade = document.querySelector('.fade');

const fadeKeyframes = {
  opacity: [0, 1],
}

const fadeOptions = {
  duration: 3000,
  easing: 'ease',
  fill: 'forwards',
}

fade.animate(fadeKeyframes, fadeOptions);

キー（プロパティ）はCSSと同じ形で記載します。例えば、opacity: [0, 1], は、不透明度を0から1にする、ということを表しています。

duraion：アニメーションの再生時間。ミリ秒で書きます。3000なら3秒です。

easing：アニメーションが変化する速度やタイミング。easeは、開始と終了は穏やかに変化します。

fill：アニメーション再生前後の状態。forwardsは、最後の状態を維持します。

そのほか、再生時間に設定できる項目には、次のようなものがあります。

delay：アニメーションの開始を遅らせる時間。

direction：アニメーションの実行方向。normal（通常）、alternate（交互）、reverse（逆方向）、alternate-reverse（alternateの逆方向）

easing：linear（一定速度。初期値）、ease-in（ゆっくり〜速く）、ease-out（速い〜だんだんゆっくり）、ease-in-out（開始と終了は穏やか）

fill：none（なし。初期値）、backwords（最初のキーフレームを適用）、both（forwardsとbackwardsの両方）

iterations：繰り返し回数。初期値は１。ループはInfinity　※大文字の「I」

②回転

▼index.html

<h2>回転</h2>
<p class="spin">文字の回転</p>

▼script.js

// 回転
const spin = document.querySelector('.spin');

const spinKeyframes = {
  rotate: ['x 360deg','x 0deg'],
  opacity: [0, 1],
}

const spinOptions = {
  duration: 2000,
  easing: 'ease',
}

spin.animate(spinKeyframes, spinOptions);

③色の変更

▼index.html

<h2>色の変更</h2>
<p class="color">背景の色が変わる</p>

▼style.css

.color {
  background-color: orange;
}

▼script.js

// 色の変更
const color = document.querySelector('.color');

const colorKeyframes = {
  backgroundColor: ['orange ','yellow ','lightgreen','slyblue'],
}

const colorOptions = {
  duration: 5000,
  direction: 'alternate',
  iterations: Infinity,
}

color.animate(colorKeyframes,colorOptions);

キーに４色設定することで、４つの色に順番に変化します。

④のびる背景

▼index.html

<h2>延びる背景</h2>
<p class="line">JavaScript</p>

▼style.css

.line {
  background-color: #0093E9;
  width: 0;
}

▼script.js

// 延びる背景
const line = document.querySelector('.line');

const lineKeyframes = {
  width: ['0','100%'],
  color: ['transparent','#FFF'],
}

const lineOptions = {
  duration: 2000,
  fill: 'forwards',
}

line.animate(lineKeyframes,lineOptions);

⑤スライドイン

▼index.html

<h2>スライドイン</h2>
<p class="slide-in">下から上にスライド</p>

▼style.css

.slide-in {
  opacity: 0;
}

▼script.js

// スライドイン
const slide = document.querySelector('.slide-in');

const slideKeyframes = {
  opacity: [0, 1],
  translate: ['0 50px', 0],
};

const slideOptions = {
  duration: 1000,
  fill: 'forwards',
};

slide.animate(slideKeyframes,slideOptions);

参考書籍・リンク