【JavaScript】クリックで文字がふわっと表示される｜フェードインアニメーションのサンプルコード

クリックすると文字がふわっと現れるフェードインのサンプルコードです。
アニメーションの基本的な使い方を試したいときや、ちょっとした演出を加えたいときの参考用としてメモしています。
コピペしてそのまま動作確認できます。

完成形
コード
Web制作を学ぶならUdemy

完成形

フェードインアニメーションの完成形です。
ボタンを押して動きをチェックしてください。

フェードイン

コード

コピペで使えるHTML・CSS・JavaScriptのサンプルです。

HTML

<div class="wrap">
  <p id="fadeIn" class="fadeIn">フェードイン</p>
  <button id="fadeInBtn" class="fadeInBtn">フェードイン</button>
</div>

CSS

.wrap {
  width: 90%;
  max-width: 500px;
  height: 400px;
  margin: 0 auto;
  padding: 10px;
  border: 1px solid #ccc;
  font-size: 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.fadeIn {
  font-size: 2em;
  margin: 0 0 60px;
  opacity: 0;
  transform: scale(0);
  transition: opacity 1s, transform 1s;
}
.fadeIn.show {
  transform: none;
  opacity: 1;
}
.fadeInBtn {
  display: block;
  width: 80%;
  min-height: 60px;
  margin: 0 auto;
  padding: 10px;
  font-size: 1.2em;
  color: #fff;
  background-color: #3f5dff;
  border: 2px solid #100600;
  cursor: pointer;
}
.fadeInBtn:hover {
  opacity: 0.9;
}

.fadeIn

テキストを非表示（透明かつ縮小）にしておく初期状態。
opacity: 0 → 完全に透明。
transform: scale(0) → サイズがゼロ（見えない）。
transition → 表示・非表示の切り替えを1秒かけてアニメーションで行う。

.fadeIn.show

.fadeIn に show クラスが追加された状態（＝表示状態）。
opacity: 1 → 不透明になる（見えるようになる）。
transform: none → 元のサイズに戻る。

JavaScript

const fadeIn = document.querySelector('#fadeIn');
const fadeInBtn = document.querySelector('#fadeInBtn');
fadeInBtn.addEventListener('click', () => {
  fadeIn.classList.toggle('show');
  fadeInBtn.textContent = '';
  fadeInBtn.setAttribute('disabled', 'true');
  setTimeout(() => {
    if (fadeIn.classList.contains('show')) {
      fadeInBtn.textContent = 'フェードアウト';
    } else {
      fadeInBtn.textContent = 'フェードイン';
    }
    fadeInBtn.removeAttribute('disabled');
  }, 1000);
});

✅ 全体の目的：

ボタンをクリックすると、テキストがふわっと表示されたり消えたりする「フェードイン／フェードアウト」のアニメーションを切り替えます。
ボタンの表示文字もそれに合わせて変わります。

🔍 コードの説明：

const fadeIn = document.querySelector('#fadeIn');

→ #fadeIn というIDの要素（＝テキスト）を取得して、fadeIn という名前で使えるようにします。

const fadeInBtn = document.querySelector('#fadeInBtn');

→ #fadeInBtn というIDのボタン要素を取得して、fadeInBtn として使えるようにします。

fadeInBtn.addEventListener('click', () => {

→ ボタンがクリックされたときに、以下の処理を実行します。

ボタンがクリックされたときの動き：

fadeIn.classList.toggle('show');

→ #fadeIn 要素に show クラスをつけたり外したりします（＝表示・非表示の切り替え）。

fadeInBtn.textContent = '';
fadeInBtn.setAttribute('disabled', 'true');

→ ボタンの文字を一時的に消して、ボタンを一時的に無効（連打防止）にします。

setTimeout(() => {
  if (fadeIn.classList.contains('show')) {
    fadeInBtn.textContent = 'フェードアウト';
  } else {
    fadeInBtn.textContent = 'フェードイン';
  }
  fadeInBtn.removeAttribute('disabled');
}, 1000);

→ 1秒（1000ミリ秒）後に、