画面の両端に上から下に画像を無限に流す(2025/8)

CSS

参考サイト

私が恋人になれるわけない【https://www.watanare-anime.com/】

サンプル

<style>
.bg-infinite-txt-wrapper {
  position: fixed;
  top: 0;
  width: 50px;
  height: 100%;
  overflow: hidden;
}
.bg-infinite-txt {
  display: flex;
  flex-direction: column;
  animation: scrollDown 10s linear infinite;
}
.bg-infinite-txt img {
  width: 50px;
  height: auto;
}
.left {
  left: 0;
}
.right {
  right: 0;
}
@keyframes scrollDown {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-50%);
  }
}
</style>

<div class='bg-infinite-txt-wrapper left'>
  <div class='bg-infinite-txt'>
    <img src=''>
    <img src=''>
    <img src=''>
    <img src=''>
  </div>
</div>
<div class='bg-infinite-txt-wrapper right'>
  <div class='bg-infinite-txt'>
    <img src=''>
    <img src=''>
    <img src=''>
    <img src=''>
  </div>
</div>

・左側は上から下に、右側は下から上に流したい場合はtranslateYを変えます

・左と右で画像が反転している場合、回転させた画像を別々に作った方がよさそう

補足：画像が3枚流れ終わると空白ができるサンプル

<style>
.bg-infinite-txt {
  position: fixed;
  top: -100%;

  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 50px;
  height: 200%;

  animation: scrollDown 10s linear infinite;
}
.bg-infinite-txt img {
  width: 50px;
  height: auto;
}
.left {
  left: 0;
}
.right {
  right: 0;
}
@keyframes scrollDown {
  0% { transform: translateY(0); }
  100% { transform: translateY(100%); }
}
</style>

<div class='bg-infinite-txt left'>
  <img src=''>
  <img src=''>
  <img src=''>
</div>
<div class='bg-infinite-txt right'>
  <img src=''>
  <img src=''>
  <img src=''>
</div>
BACK