【JavaScript】上から1文字ずつスライドインするアニメーション

2024.11.15

【JavaScript】上から1文字ずつスライドインするアニメーション

見出しをカッコよく表示させたい。アニメーションで動かしたいって思う事はよくありますよね。
今回は上から1文字ずつスライドインするアニメーションをご紹介します。

HTMLの記述

HTML
<h2>
  <span class="letter">A</span>
  <span class="letter">B</span>
  <span class="letter">O</span>
  <span class="letter">U</span>
  <span class="letter">T</span>
  <span class="letter"> </span>
  <span class="letter">U</span>
  <span class="letter">S</span>
</h2>

各文字をspanタグで囲みます。

CSSの記述

CSS
h2 {
  display: flex;
  justify-content: center;
  font-size:4vw;
}

.letter {
  opacity: 0;
  transform: translateY(-40px);
  display: inline-block;
  animation: slideIn 1s ease forwards;
}

@keyframes slideIn {
   to {
    opacity: 1;
    transform: translateY(0);
  }
}

アニメーションを定義し、1文字ずつ遅延させて表示させます。

JavaScriptの記述

JavaScript
document.addEventListener("DOMContentLoaded", function () {
  const letters = document.querySelectorAll(".letter");
  letters.forEach((letter, index) => {
    letter.style.animationDelay = `${index * 0.1}s`;
  });
});

このコードでは、.letterクラスの各要素に0.1秒ずつ遅延を加え、1文字ずつ上からスライドインするアニメーションが実行されます。