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を適応させようとしたのに、上手く指定した内容が反映されない。   どうしたらいいのかわからなくて、手が止まってしまっている状況を解決 ...

続きを見る

 

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

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

 

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

 

注意ポイント

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

 

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

 

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

 

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

 

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

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

  • この記事を書いた人
  • 最新記事
誠太

誠太

あなたの"困った"を解決するSEITALITYのブログ主。趣味はSEO研究とプログラミング。接客で年間売上1,600万の記録保持者。Web開発会社へ転身することが当面の目標。執筆・お仕事のご依頼はお問い合わせから!

よく読まれている記事

1

  AFFINGER5を購入しようか迷っているけど、損をしない特典が付いているところから購入したい。実用特典ってどんな特典なの?   ご覧いただいてありがとうございます。 &nbs ...

2

スポンサーリンク   アフィリエイトに向いているASPってあるのかな?もし稼ぎやすいASPがあるなら登録したいんだけど、おすすめのASPってある?   こんな悩みに解決しようと思い ...

3

  誠太こんにちは、誠太です!   ブログを運営していると、自分の文章をもっと良くしたいと思ってしまうものではないでしょうか。   しかし、ただブログを書いているだけでは ...

4

  THE THOR(ザ・トール)のレビューが知りたい THE THOR(ザ・トール)の特典で損をしない特典がほしい THE THOR(ザ・トール)で収益化できるのかを知りたい THE TH ...

5

  誠太こんにちは、誠太です。   WordPressのテーマはいまや沢山の種類がリリースされ、個人制作のものや企業がリリースしているものまで溢れかえるようになりました。 &nbs ...

-CSS
-

Copyright© SEITALITY , 2020 All Rights Reserved.