タイトルをふわっと表示させるアニメーション

H1/H2/H3/H4のタイトルに動きをつけてふわっと表示させたいなぁと思いました。
HPにも流行りがあるのと、動きを付けることで”洗練されたサイト”としてアピールできるからです。

Blocks Animation: CSS Animations for Gutenberg Blocks プラグインを使えばブロック単位で設定できますが、CSSとJSを使うことでサイト全体に反映することができます。このサイトにも適用してみました。

JS（JavaScript）の設定

外観＞カスタマイズ＞高度な設定 を開きます。

bodyタグ終了直前に出力するコード に次のコードを入力します。
</body>直前

こちらを入力。

<script>
window.addEventListener('load', function() { // DOMContentLoadedより確実なloadを使う
  const targets = document.querySelectorAll("h2, h3, h4");

  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.classList.add("show");
      }
    });
  }, {
    threshold: 0.1 // 20%も見えなくていい、10%で見えたら動かす
  });

  targets.forEach(target => {
    target.classList.add("fade-up"); // ここでクラスを付与
    observer.observe(target);
  });
});
</script>

CSS設定

外観＞カスタマイズ＞追加のCSS を開きます。

CSSを入力します。

/* H2,H3,H4のアニメーション1 */
/* 初期状態 */
h2.fade-up, h3.fade-up, h4.fade-up {
  opacity: 0 !important;
  transform: translateY(15px) !important;
  transition: opacity 1.3s ease, transform 1.3s ease !important; 
}

/* H2,H3,H4のアニメーション2 */
/* 表示状態（クラスが2つくっついた状態を明示する） */
h2.fade-up.show, h3.fade-up.show, h4.fade-up.show {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

公開ボタンを忘れずに！

動かない時は…

SWELL設定＞高速化＞遅延読み込み機能
「スクリプトを遅延読み込みさせる」のチェックを外します。

見出しH2,H3,H4がふわぁっと動く

動いたの分かりました？
もし動く範囲や速度を変えたい場合は次の設定をいじってみてください。

  transform: translateY(15px) !important;
  transition: opacity 1.3s ease, transform 1.3s ease !important; 

画像とかのブロックを簡単にアニメーションを付けたい場合はこちらの記事を参考にしてください。

あわせて読みたい

トップのヒーロー画像にアニメーションを付ける方法 今回は「Blocks Animation: CSS Animations for Gutenberg Blocks」を使って、トップページのヒーロー画像にアニメーションを付ける方法を紹介します。このプラグインは...