【JavaScript】一定時間ごとにアニメーションするアイコンを実装

2025年05月30日

WEBサイト制作

#HTML
#css
#JavaScript
#tips

こんにちは！
上毛印刷WEB制作担当のソーヤです。

今回は、とっても可愛いエフェクトを紹介します！

実装例

HTML例

<div class="illust-box">
  <ul class="illust-list pos-point">
    <li class="illust-list__item illust-list__item01 dropTrigger pos-point">
      <img src="./monkey.png" alt="さる">
    </li>
    <li class="illust-list__item illust-list__item02 dropTrigger pos-point">
      <img src="./mouse.png" alt="ネズミ">
    </li>
    <li class="illust-list__item illust-list__item03 dropTrigger pos-point">
      <img src="./pig.png" alt="豚">
    </li>
    <li class="illust-list__item illust-list__item04 dropTrigger pos-point">
      <img src="./rabbit.png" alt="うさぎ">
    </li>
    <li class="illust-list__item illust-list__item05 dropTrigger pos-point">
      <img src="./elephant.png" alt="ゾウ">
    </li>
    <li class="illust-list__item illust-list__item06 dropTrigger pos-point">
      <img src="./dog.png" alt="イヌ">
    </li>
    <li class="illust-list__item illust-list__item07 dropTrigger pos-point">
      <img src="./bear.png" alt="クマ">
    </li>
    <li class="illust-list__item illust-list__item08 dropTrigger pos-point">
      <img src="./cat.png" alt="ネコ">
    </li>
  </ul>
</div>

CSS例

.illust-box {
  width: 100%;
  height: 620px;
  background-image: url(https://jomo-p.co.jp/cp/wp/wp-content/uploads/2025/05/2628756.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
.illust-list{
  position: relative;
}
.illust-list__item{
  position: absolute;
  width: 110px;
  list-style: none;
}
.illust-list__item img{
  width: 100%;
}
.illust-list__item01 {
  top: 461px;
  right: 122px;
}
.illust-list__item02 {
  top: 160px;
  right: 42px;
}
.illust-list__item03 {
  top: 168px;
  right: 188px;
}
.illust-list__item04 {
  top: 455px;
  right: 258px;
}
.illust-list__item05 {
  top: 482px;
  left: 296px;
}
.illust-list__item06 {
  top: 167px;
  left: 291px;
}
.illust-list__item07 {
  top: 442px;
  left: 116px;
}
.illust-list__item08 {
  top: 179px;
  left: 41px;
}
@keyframes bound {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0px);
  }
}
.is-jump{
  animation: bound .6s ease-in-out;
}

JavaScript例

setInterval(function() {
  const images = document.querySelectorAll('.illust-list__item > img');
  images.forEach(function(img) {
    img.classList.add('is-jump');
  });
  setTimeout(function() {
    images.forEach(function(img) {
      img.classList.remove('is-jump');
    });
  }, 800);
}, 3000);