文字のアニメーションどれにしますか？ってときに見せるやつ

タイトルどおり文字のアニメーションどれにしますか？ってときに見せるやつ。毎回そんなに変わるわけではないので、実用的なものを一覧で。こんなの書いててあれですが、文字の動きは基本的に不要だと思っているので、穏やかに行きませんか？を合言葉に静かなサイトを作っていきたい。さよならパララックス！（流れ弾）

See the Pen Text Animations by nishinoshake (@nishinoshake) on CodePen.

使い方

CodePen で .anime のHTMLをコピペ、該当するクラス名のCSSをコピペ、JSで is-active クラスを追加、で動きます。イージングはCSS変数で定義しているので忘れずにコピペしてください。

<p class="anime anime-fade-y">Guardians of the Galaxy</p>

<style>
:root {
  --ease-relaxed: cubic-bezier(0.28, 0.11, 0.02, 1);
}

/* anime-fade-y */
.anime-fade-y {
  opacity: 0;
  transform: translateY(0.5em);
}
.anime-fade-y.is-active {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 400ms ease, transform 640ms var(--ease-relaxed);
}
</style>

<script>
setTimeout(() => {
  document.querySelector('.anime').classList.add('is-active')
}, 500)
</script>

小技

文字を分割するときにCSS変数でインデックスを振ると便利。web.dev に素敵な記事があったので貼っておきます。↓のコードも大部分は記事を参考にしています。<span> で分割される文字が可愛そうだと思わないのか！さよならパララックス！（流れ弾）

• Building split text animations

const splitText = (el) => {
  if (el.firstChild === null || el.textContent === null) {
    return
  }

  const characters = el.textContent.split('').map((character, index) => {
    const span = document.createElement('span')

    span.textContent = character
    span.style.setProperty('--index', index.toString())

    return span
  })

  el.firstChild.replaceWith(...characters)
}

const target = document.querySelector('.target')

if (target) {
  splitText(target)
}