【コピペで使用OK！】スクロールすると下から順番にふわっと要素が表示されるアニメーション

2024年8月20日2024年8月27日

【コピペOK！】スクロールすると下から順番にふわっと要素が表示されるアニメーション

misa

こんにちは、ウェブデザインパレットのmisaです。

今回は、HTMLとCSS、Javascriptで、スクロールすると下から順番にふわっと要素が表示されるアニメーションを実装する方法について解説します。

テキストを1行ごとにフェードインで表示させたいや、画像を1枚ずつ順番に表示させたい場合などに使えます。

Contents

下から順番にふわっとテキストが現れるアニメーション

人生に遅すぎることは何もない。

いつ始めてもいいんだ。

変わるものも、変わらないのも君の自由だ

HTML

<div class="container">
  <p class="fade-in-text">人生に遅すぎることは何もない。</p>
  <p class="fade-in-text">いつ始めてもいいんだ。</p>
  <p class="fade-in-text">変わるものも、変わらないのも君の自由だ</p>
</div>

<div class="container"> は全体を包むコンテナです。
各行のテキストを <p class="fade-in-text"> タグで個別に包みます。これにより、各行に対して個別のアニメーションを適用できます。

CSS

.container {
  height: 500px;
  padding: 100px 0;
}

.fade-in-text {
  opacity: 0;
  transform: translateY(100px);
  transition: opacity 1s ease-out, transform 2s ease-out;
  transition-delay: calc(var(--delay) * 1.5s);
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  padding-bottom:24px;
}

.fade-in-text.visible {
  opacity: 1;
  transform: translateY(0);
}

.fade-in-text クラス

opacity: 0; と transform: translateY(100px); により、初期状態ではテキストが不透明度0（見えない）で、100ピクセル下にずれた状態になります。
transition: opacity 1s ease-out, transform 2s ease-out; により、不透明度は1秒かけて、位置は2秒かけて変化します。「ease-out」はアニメーションの終わりがゆっくりになるように設定しています。
transition-delay: calc(var(--delay) * 1.5s); は各行のアニメーションを遅らせるためのプロパティです。--delay はカスタムプロパティ（CSS変数）で、JavaScriptで設定される値に応じて遅延時間を計算します。calc(var(--delay) * 1.5s) により、行ごとに1.5秒ずつ遅れてアニメーションが開始されます。

.fade-in-text.visible クラス

このクラスが適用されると、opacity: 1; でテキストが表示され、transform: translateY(0); でテキストが元の位置（100px下ではない）に戻ります。

JavaScript

window.addEventListener('scroll', function() {
  const textElements = document.querySelectorAll('.fade-in-text');
  
  textElements.forEach((element, index) => {
    const position = element.getBoundingClientRect().top;
    const screenPosition = window.innerHeight / 1.3;

    if (position < screenPosition) {
      element.style.setProperty('--delay', index);
      element.classList.add('visible');
    }
  });
});

window.addEventListener('scroll', function() {...});
ウィンドウがスクロールされるたびに、この関数が実行されます。
const textElements = document.querySelectorAll('.fade-in-text');
.fade-in-text クラスを持つすべての要素を選択し、textElements という配列のようなオブジェクトに格納します。
textElements.forEach((element, index) => {...});
textElements の各要素（element）とそのインデックス（index）に対して、繰り返し処理を行います。
const position = element.getBoundingClientRect().top;
getBoundingClientRect() メソッドは、要素の画面上の位置を返します。top は、要素の上端がウィンドウの上端からどれだけ離れているかを示します。
const screenPosition = window.innerHeight / 1.3;
画面の高さを 1.3 で割り、要素が画面のどの位置で表示されるかを決定する基準を設定します。ここでは画面の下から約1/3の位置を基準としています。
if (position < screenPosition) {...}
要素の位置が基準よりも上に来た場合（つまり、要素が表示され始めた場合）、アニメーションを開始します。
element.style.setProperty('--delay', index);
--delay というカスタムプロパティにインデックス index の値を設定します。これにより、行ごとに遅延が適用されます。
element.classList.add('visible');
.visible クラスを追加し、CSSのトランジションをトリガーします。

下から順番にふわっと画像が現れるアニメーション

misa

画像の場合も同じように実装できます。

HTML

<div class="image-container">
  <img class="fade-in-image" src="image.jpg" alt="">
  <img class="fade-in-image" src="image.jpg" alt="">
  <img class="fade-in-image" src="image.jpg" alt="">
</div>

CSS

.image-container {
  height: 400px;
  padding: 100px 0;
  display: flex;
  justify-content: center;
  gap: 40px;
}

.fade-in-image {
  opacity: 0;
  transform: translateY(100px);
  transition: opacity 1s ease-out, transform 2s ease-out;
  transition-delay: calc(var(--delay) * 1.5s);
  width: 200px;
  height: 200px;
  aspect-ratio: 1/1;
  object-fit: cover;
}

.fade-in-image.visible {
  opacity: 1;
  transform: translateY(0);
}

JavaScript

window.addEventListener('scroll', function() {
  const textElements = document.querySelectorAll('.fade-in-image');
  
  textElements.forEach((element, index) => {
    const position = element.getBoundingClientRect().top;
    const screenPosition = window.innerHeight / 1.3;

    if (position < screenPosition) {
      element.style.setProperty('--delay', index);
      element.classList.add('visible');
    }
  });
});