【WordPress】要素がふわっと現れるアニメーションの作り方

今回は、ウェブページにスクロールトリガーのアニメーション効果を追加する方法について、詳しく解説します。特に、ページをスクロールすると要素が下から滑らかに現れる効果の実装方法を、説明していきます。

CSSでアニメーションの基礎を設定
JavaScriptでスクロールトリガーを実装
実装の結果
まとめ

CSSでアニメーションの基礎を設定

まず、CSSを使ってアニメーションの基本的な動作を定義します。

.fade-up {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

このCSSの各プロパティについて詳しく見ていきましょう。

.fade-up クラス：
- opacity: 0;: 要素の不透明度を0に設定し、完全に透明にします。
- transform: translateY(20px);: 要素をY軸方向（縦方向）に20ピクセル下に移動させます。
- transition: opacity 0.5s ease, transform 0.5s ease;: opacityとtransformプロパティの変化を0.5秒かけて行い、イージング関数としてeaseを使用します。これにより、滑らかな変化が実現されます。
.fade-up.is-visible クラス：
- opacity: 1;: 要素の不透明度を1に設定し、完全に不透明にします。
- transform: translateY(0);: 要素を元の位置（Y軸方向に0ピクセル）に戻します。

この設定により、.fade-up クラスを持つ要素は初期状態で透明かつ少し下にずれた位置にあり、.is-visible クラスが追加されると不透明になって元の位置に移動します。

JavaScriptでスクロールトリガーを実装

次に、JavaScriptを使用してスクロールイベントを検知し、要素が画面内に入ったタイミングでアニメーションを開始させます。

const fadeUpElements = document.querySelectorAll('.fade-up');

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('is-visible');
    }
  });
});

fadeUpElements.forEach(element => {
  observer.observe(element);
});

このJavaScriptコードの各部分を詳細に解説します：

const fadeUpElements = document.querySelectorAll('.fade-up');
- document.querySelectorAll() メソッドを使用して、ページ内の全ての .fade-up クラスを持つ要素を選択し、fadeUpElements 定数に格納します。
const observer = new IntersectionObserver((entries) => { ... });
- IntersectionObserver APIを使用して新しいオブザーバーを作成します。このAPIは、指定された要素が画面内に入ったかどうかを監視します。
entries.forEach(entry => { ... });
- オブザーバーが監視している全ての要素（entries）に対して処理を実行します。
if (entry.isIntersecting) { ... }
- isIntersecting プロパティをチェックし、要素が画面内に入ったかどうかを判定します。
entry.target.classList.add('is-visible');
- 要素が画面内に入った場合、その要素（entry.target）に is-visible クラスを追加します。これにより、CSSで定義したアニメーションが開始されます。
fadeUpElements.forEach(element => { observer.observe(element); });
- 全ての .fade-up 要素に対してオブザーバーを設定します。これにより、各要素が個別に監視され、画面内に入ったタイミングでアニメーションが開始されます。

実装の結果

この実装により、以下のような動作が実現されます。

初期状態では、.fade-up クラスを持つ要素は不透明度0で、通常の位置より20ピクセル下に配置されています。
ユーザーがページをスクロールし、該当要素が画面内に入ると、IntersectionObserverがそれを検知します。
検知されると即座に .is-visible クラスが追加されます。
CSSのtransitionプロパティにより、0.5秒かけて要素が徐々に不透明になり、同時に上方向に20ピクセル移動します。

この手法を使用することで、ページスクロールに連動した滑らかな要素の出現エフェクトを実現できます。

まとめ

今回は、CSSとJavaScriptを組み合わせて、スクロールトリガーのアニメーション効果を実装する方法を詳しく解説しました。この技術を応用することで、ユーザーの注目を集める動的なウェブページを作成することができます。さらに発展させたい場合は、アニメーションの種類を増やしたり、スクロール位置に応じて異なる効果を適用したりすることも可能です。