CSS

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

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

 

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

 

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

 

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

 

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

スクロールで背景画像が動く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;』の数値を変更することで調節可能です。

 

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

 

Bootstrapで作成時の注意点

Bootstrapで作成時の注意点

 

ここまでのコードをコピペして、画像ファイルの名称を変更することで実装可能となっています。

 

しかし、Bootstrapを使用することでCSSの適応やJsの適応がうまく行かない場合があるので、注意が必要です。

 

CSSの適応がうまく行かない場合がある

BootstrapはCSSのフレームワークなので、ある程度CSSが固定で備わっていることが利点となっています。

 

しかし、その利点ゆえにCSSで変更することが不可能な場合があるので、望んだ効果にならないこともしばしば。

 

Bootstrapで自分で用意したCSSが適応されない場合について、こちらの記事で解説しているので興味のある人は一緒に確認してみてください。

 

参考記事
【Bootstrap】 CSSが反映されないときの対処法

続きを見る

 

Bootstrapと外部CSS/jQueryを利用して、少しでも時間短縮

Bootstrapと外部CSS/jQueryを利用して、少しでも時間短縮

 

今回は、CSSでスクロールに追従する形で背景画像を表示させる方法について解説しました。

 

注意ポイント

ここで注意が必要なのが、iOSではうまく動作しないということです。

 

現在この状態を維持しつつ、iOS端末でも正常に動作するようにはどうしたら良いのかを製作中なので、うまく実装できたときにはブログにて紹介したいと思います。

 

もし、すでにその方法を知っているという方がいれば、教えていただければ嬉しく思います。

 

それではまた次回の更新で!

 

オススメ記事【Udemyが強い!】Web制作を独学で学べる講座はひとつあれば事足りそう

オススメ記事プログラミングの本は学習に必要だけど、本だけではキツいというお話【体験談】

\Twitterのフォローをお願いしますっ /

  • この記事を書いた人
  • 最新記事
セイタ

セイタ

『ひとつ先のブログ情報』を発信するSEITALITYの管理人。ブログ月収41万円。専業アフィリエイター兼ブロガーとして活動しています。趣味はギター・ゲーム・ガジェット集め。最近はAPEX Legendsがブーム。愛用デバイスはG502 HEROとAPEX PRO TKL。

-CSS
-

© 2020 SEITALITY