画面内に入ったらデカくなって元の大きさに戻る（JSライブラリなし）

2025/08/26 Javascript

HTML

<div class='bounce_wrapper'>
  <div class='bounce bounce_target'><BOUNCE!/div>
</div>

CSS

.bounce {
  opacity: 0;  // 最初は透明にしておく
}
.bounce.bouncing {
  animation: bounce 2.5s 1s forwards;
}
@keyframes {
  0% {
    opacity: 0;
    transform: scale(0.2);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

Javascript

IntersectionObserverを使い、ターゲットが画面内に入ったらクラス名を追加・除去します

今回はターゲットが画面に入るたびに何回もバウンスさせます

const myTarget = document.querySelector('.bounce_target');
// IntersectionObserverのオプションを設定します
let myOptions = {
  root: null,
  rootMargin: "0px 0px",
  threshold: "0"
};

// IntersectionObserverを作成します
const myObserver = new IntersectionObserver(myIntersect, myOptions);

// myTargetを監視
myObserver.observe(myTarget);

// myTargetが画面内に入ったら、クラス名を追加・除去します
function myIntersect(entries, myObserver) {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      myTarget.classList.remove('bounce_target');
      myTarget.classList.add('bouncing');
    } else {
      myTarget.classList.remove('bouncing');
      myTarget.classList.add('bounce_target');
    }
  });
}

BACK