スクロールで背景画像が動くCSSの書き方！【簡単におしゃれLPが作成可能】

2024-04-23

セイタ

ブログ・ゲーム・ガジェットが好きな30歳。普段は営業の仕事をしながらブログを書いたり、トレンドになっているゲームを楽しんでいます。ブログ開始（27歳）→独立（28歳）→コロナで再就職（29歳）→複業ライフ満喫中。ゲーミングデバイスレビューやお仕事の依頼はメールアイコンへ。

セイタ

こんにちは、セイタです。

今回は、背景画像がスクロールした際に背景画像をついてこさせるCSSを紹介したいと思います。

Bootstrapを使用して簡単に作成していますが、通常のHTMLでコーディングしても作成可能な物となっているので、技術の一つとして自分の引き出しに入れてもらえたら幸いです。

スクロールで背景画像が動くCSSの書き方！【簡単におしゃれLPが作成可能に】

スクロールに背景画像が動くアニメーションを作成する際に必要なもの。

HTMLファイル（phpファイルでも可）
CSSファイル
画像ファイル

index.htmlとstyle.cssとimgフォルダは同一ディレクトリの中にあるものとしてください。

プロジェクトフォルダ『Sample』の中身

imgフォルダ
index.html
style.css

Bootstrapを使用して土台を作成

コードサンプルは下記のコードを参考にしてみてください。

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="style.css">

    <title>Hello, world!</title>
  </head>
  <body>
    <div class="bg-dark d-flex align-items-center" style="height: 210px; padding-left: 200px;">
      <h1 class="text-white">スクロール背景サンプルページ</h1>
    </div>
    <div class="container-fluid bg-light">
      <div class="row">
        <div class="col-xl-12" style="height: 800px;">
          <p class="text-center">サンプルコンテンツスペース</p>
        </div>
      </div>
    </div>

//ブロック1
    <div class="bg_scroll_1">
      <div class="mask rgba-white d-flex align-items-center inner">
        <div class="container">
          <div class="row">
            <div class="col-md-12 black-text text-center text-md-right copy">
              <h2 class="display-4 font-weight-bold text-right text-white">Sample</h2>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="container-fluid bg-light">
      <div class="row">
        <div class="col-xl-12" style="height: 800px;">
          <p class="text-center">サンプルコンテンツスペース</p>
        </div>
      </div>
    </div>

//ブロック2
    <div class="bg_scroll_2">
      <div class="mask rgba-white d-flex align-items-center inner">
        <div class="container">
          <div class="row">
            <div class="col-md-12 black-text text-center text-md-right copy">
              <h2 class="display-4 font-weight-bold text-right text-white">Sample</h2>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="container-fluid bg-light">
      <div class="row">
        <div class="col-xl-12" style="height: 800px;">
          <p class="text-center">サンプルコンテンツスペース</p>
        </div>
      </div>
    </div>

//ブロック3
    <div class="bg_scroll_3">
      <div class="mask rgba-white d-flex align-items-center inner">
        <div class="container">
          <div class="row">
            <div class="col-md-12 black-text text-center text-md-right copy">
              <h2 class="display-4 font-weight-bold text-right text-white">Sample</h2>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="container-fluid bg-light">
      <div class="row">
        <div class="col-xl-12" style="height: 800px;">
          <p class="text-center">サンプルコンテンツスペース</p>
        </div>
      </div>
    </div>
    <footer>
      <div class="container-fluid bg-dark">
        <div class="row">
          <div class="col-xl-12" style="height: 300px;">
            <p class="text-center text-white">フッターエリア</p>
          </div>
        </div>
      </div>
    </footer>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  </body>
</html>

ちょっと長く見えますが、ブロック1～ブロック3は同一コードなので、ブロック1のみにするとそこまで長くありません。

ちなみにこのままコピペしても使用できるので、自分の環境ではどのように表示されるかどうか確認してみてください。

スクロールで背景画像を動かすCSS

CSSに関しては、こちらのコードを参考にしてみてください。

/*背景スクロール*/
.bg_scroll_1 {
	height: 210px;
	background-image: url(img/top.jpg);
	background-size: cover;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: center center;
	z-index: 1;
}

.bg_scroll_2 {
	height: 210px;
	background-image: url(img/sample.jpg);
	background-size: cover;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: center center;
	z-index: 1;
}

.bg_scroll_3 {
	height: 210px;
	background-image: url(img/last.jpg);
	background-size: cover;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: center center;
	z-index: 1;
}

.inner{
  min-height: 210px;
  position: relative;
  background: rgba(0,0,0,0.5) url() repeat;
  width: 100%;
}

.bg_scroll_1～.bg_scroll_3は複製なので、使用するブロックの数に応じてコピーしてください。

また画像ファイルに関しては、『background-image: url(img/last.jpg);』この部分にファイル名を入力し、ボックスの大きさは『height: 210px;』の数値を変更することで調節可能です。

また、今回このアニメーションを実装するにあたって『アド･エータイプ』さんのコードを参考にさせていただきました。