【JQuery】背景画像を横に動かす | 電網覚書

本記事のソースコードの利用によって生じた損害について、当方は一切の責任を負いません。ご自身の判断と責任のもとで参照・ご利用ください。

この記事は最終更新から3年以上経過しています。

jQueryで背景画像をゆっくり左から右にスライドさせたいという要望を受けて実装したときのメモ。一応ブラウザサイズの変動に対応するようにしています。

<!DOCTYPE html>
  <html lang="ja">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
  
      //リサイズ・リロード時の処理
      $(window).on('load resize', function(){
      var w = $(window).width();
      });
      
      //リサイズ・リロード時に取得した値を元に背景画像を動かす
      $(document).ready(function (w) {
        var scrollSpeed = 0.05;
        var imgWidth = w;
        var posX = 0;
        setInterval(function(){
          if (posX >= imgWidth) posX= 0;
          posX += scrollSpeed;
          $('.imgBox').css("background-position",posX+"px 0");
        }, 1);
      });
    </script>
    <style>
      html,body{
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
      }
      .imgBox {
        width: 100%;
        height: 100%;
        background: url(img/bg.jpg);
        background-attachment: fixed;
        background-size: cover;
      }
    </style>
    <title>test</title>
  </head>
  <body class="imgBox">
    <h1>test</h1>
  </body>
  </html>