上毛印刷株式会社

【JavaScript】画像を流れるようにループ表示する

【JavaScript】画像を流れるようにループ表示する

2023年11月22日
WEBサイト制作
  • #HTML
  • #css
  • #JavaScript
  • #tips

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

今回はカルーセルを使わず、画像を流れるように表示する方法をご紹介します。

実装例

流れる画像

HTML例

<div id="streaming-img">
  <h1>流れる画像</h1>
</div>

CSS例

#streaming-img{
  position: relative;
  background-image: url(/cp/wp/wp-content/uploads/2023/11/steaming-scaled.jpg);
  background-repeat: repeat-x;
  background-size: cover;
  width: 100%;
  height: 300px;
  border: 4px solid #000;
}
#streaming-img h1{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-75%);
  color: #fff;
  text-shadow: 0px 4px 2px rgba(0,0,0,0.3);
}

JavaScript例

let streamingImg = document.getElementById('streaming-img');
let bgx = 0;
let bgy = 0;
setInterval(function(){
  bgx += -0.5;
  bgy += 0;
  streamingImg.style.backgroundPosition = bgx + "px " + bgy + "px";
},10);

まとめ

ちなみに今回もjQueryではなく、Vanilla.jsで実装してみました。
コピペしてガンガン使ってください!

WEB制作担当ソーヤ

ソーヤ

上毛印刷WEB制作担当
前職は東証プライム企業の本社WEB受託チームにてフロントエンドエンジニアを3年経験。


この記事に対するご意見・ご感想・ご質問等ありましたら、
ぜひ下記フォームにてお送りください。

    お名前必須
    メールアドレス必須
    お問い合わせ内容必須
    PAGE TOP