今回は、背景画像がスクロールした際に背景画像をついてこさせる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;』の数値を変更することで調節可能です。
また、今回このアニメーションを実装するにあたって『アド･エータイプ』さんのコードを参考にさせていただきました。
Bootstrapで作成時の注意点
ここまでのコードをコピペして、画像ファイルの名称を変更することで実装可能となっています。
しかし、Bootstrapを使用することでCSSの適応やJsの適応がうまく行かない場合があるので、注意が必要です。
CSSの適応がうまく行かない場合がある
BootstrapはCSSのフレームワークなので、ある程度CSSが固定で備わっていることが利点となっています。
しかし、その利点ゆえにCSSで変更することが不可能な場合があるので、望んだ効果にならないこともしばしば。
Bootstrapで自分で用意したCSSが適応されない場合について、こちらの記事で解説しているので興味のある人は一緒に確認してみてください。
-
【Bootstrap】 CSSが反映されないときの対処法
続きを見る
Bootstrapと外部CSS/jQueryを利用して、少しでも時間短縮
今回は、CSSでスクロールに追従する形で背景画像を表示させる方法について解説しました。
注意ポイント
ここで注意が必要なのが、iOSではうまく動作しないということです。
現在この状態を維持しつつ、iOS端末でも正常に動作するようにはどうしたら良いのかを製作中なので、うまく実装できたときにはブログにて紹介したいと思います。
もし、すでにその方法を知っているという方がいれば、教えていただければ嬉しく思います。
それではまた次回の更新で！