トップへ戻る
BLOGS

JS 文字を一つづつアニメーションさせます(CSS編)

JS 文字を一つづつアニメーションさせます(CSS編)

はい。前回からの続きで文字のアニメーションを書いていこうと思います。

前回までコードを載せておきます

まずはHTML

<main>
    <div class="text-animation">おジャコの</div>
    <div class="text-animation">Webキッチンへ ようこそ</div>
  </main>

これにJSで文字を全て取得して新たに <span>タグで囲ってあげてまたもとに戻すようにするコードです。

const animationElements = document.querySelectorAll(".text-animation");
for (let i = 0; i < animationElements.length; i++) {
  const targetelement = animationElements[i],
  texts = targetelement.textContent;

  textArray = [];
  targetelement.textContent = "";

  for (let j = 0; j < texts.split("").length; j++) {
    if (texts.split("")[j] === " ") {
      textArray.push(" ");
    } else {
      textArray.push('<span style="animation-delay: ' + (j * .2) + 's;">' + texts.split("")[j] + '</span>');
    }
  }
  for (let k = 0; k < textArray.length; k++) {
    targetelement.innerHTML += textArray[k];
  }
}

前回からの補足として

空白が入っていた場合にはタグを出力しない

ということを追記しておきます。そのコードが

if (texts.split(“”)[j] === ” “) {
textArray.push(” “);

の部分で、もしも、、texts.split(“”)[j]、、が、、=== ” “空白なら

textArray.push(” “);配列に空白だけを追加する。

という意味になります。

文字をアニメーションさせるCSSを書いていく。

まずは簡単に根幹部分から

main {
  width: 100%;
  height: 100vh;
  text-align: center;
  background-color: #333;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  letter-spacing: 0.05em;
}

.text-animation {
  width: 100%;
  color: #fff;
  font-size: 70px;
}

ここはお好みでレイアウト合わせて記述してください

@keyframes を定義して動きを作る

@keyframes showText {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
  }
}

簡単に最初は透明で下にある文字が浮き上がってくる動きにします。

次にアニメーションされる側に色々書いていきます。

.text-animation span {
  display: inline-block;
  animation: showText 3s;
  animation-fill-mode: backwards;
}

animation-fill-mode: backwardsはアニメーションの開始位置を

@keyframesの0%にするための記述です。

他のバリエーションもやってみる

上下から降りてくるような演出

まず先のアニメーションをコピーして2つ用意します。

@keyframes showTextTop {
  0% {
    opacity: 0;
    transform: translateY(-30px);
  }
  100% {
    opacity: 1;
  }
}
@keyframes showTextBottom {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
  }
}

そしてもちろん要素の方もコピーして少々追記します。

.text-animation span:nth-child(odd) {
  display: inline-block;
  animation: showTextTop 3s;
  animation-fill-mode: backwards;
}
.text-animation span:nth-child(even) {
  display: inline-block;
  animation: showTextBottom 3s;
  animation-fill-mode: backwards;
}

これの仕組みとしてはnth-childで偶数、奇数を指定して上下をずらしています。

箱から出てくるような演出

次は文字が箱から出てくるような、見切れて現れるような演出をします

具体的には透明の箱を用意しそこから中の文字が現れるようにします。

そこでJSでタグを出力する際にもう一つ<span>タグを出力してあげてそれにスタイルを指定します。

textArray.push('<span><span style="animation-delay: ' + (j * .2) + 's;">' + texts.split("")[j] + '</span></span>');

あとはCSSで指定します

対象はまず最初の<span>タグに対してのみの指定をします。

.text-animation > span {
  overflow: hidden;
}

これで内側の<span>タグは外側のタグから少しでもはみ出ると見えなくなるようになりました。

あとは上と同じようにtransformY(100%)でずらしてやればうまくいきそうです。

アニメーションを準備します。

@keyframes showTextBottom {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0%);
  }
}

次に内側の<span>にアニメーションですね。

.text-animation span {
  display: inline-block;
}
.text-animation > span > span{
  animation: showTextBottom 1s;
  animation-fill-mode: backwards;
}

これで動作は問題ないですが少し遅いのでJSの数値を上げましょう

 ' + (j * .1) + 's;">'

これできれいな演出を作ることが出来ました。

JSは少々難しかったですが可能性は広がるばかりで楽しいですね。

ではまた!

コメントをお待ちしております

お気軽にコメントをどうぞ。

CAPTCHA