【HTML】背景画像だけ動かないアレの作り方

Photo by Hello I'm Nik on Unsplash プログラミング
Photo by Hello I'm Nik on Unsplash

こんにちは、コンスキです。

今回はおしゃれなサイトでよく見かける背景画像だけ動かないアレの作り方をご紹介します。

作り方を知りたかったのですが、ずっと後回しにして調べていなかったので、作り方をまとめることで自分の学びにしたいと思います。

背景画像だけ動かないアレとは

アレと言われてもわからないとお思うので実際にどんなものか見てみましょう。

このようなデザインをこれまでに見かけた事はありませんか?

実はこのようなデザインには、「パララックスデザイン」という名前があるんです。

私は最近知りました。

パララックスデザインのパララックス(Parallax)とは、日本語に訳すと「視差」になります。

視差は視点によって天体や物体の位置の見え方が変わることを表す言葉です。

HTMLとCSSだけで作れるのでぜひ作り方を確認してみてください。

作り方

機能だけを使えるようにするただけの最小限のコードがこちらになります。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>パララックスデザイン</title>
  <link rel="stylesheet" href="parallax.css">
</head>
<body>
  <div>セクション1</div>
  <div class="parallax"></div>
  <div>セクション2</div>
</body>
</html>

CSS

body,
html {
  height: 100%;
  margin: 0 auto;
}
 
/*動かなくしたい背景画像*/
div {
  box-sizing: border-box;
  height: 100%;
}
.parallax {
  background-image: url('背景画像のURL');
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

背景を固定するという機能だけであれば、これだけ少ないコードで実現できます。

CSSで何をやったの?

HTMLに対しては必要な要素しか書いていないため、CSSがスクロールしても背景画像が動かないように固定しているのはCSSだということがわかります。

ではCSSのどのプロパティがそうしているのでしょうか?

上に出てきたCSSの中で一番重要なのは「background-attachment」というプロパティ名です。

このプロパティはスクロールした時に背景画像をどのように動かすかを指定できます。

初期値は「scroll」になっていて、要素をスクロールすると背景も一緒にスクロールされますが

値を「fixed」に変えることで、要素をスクロールしてもは背景は動かないようにすることができます。

おわりに

パララックスデザインを調べて学んだことは、見かけたデザインはすぐに調べたほうがいいということです。

私が初めてパララックスデザインを見た時、難しいJavaScriptを使っているのかと思ってコードの書き方調べるのを後回しにしていました。

しかし、今回のパララックスデザインのように一見複雑そうなデザインでも、案外簡単なコードで書けるかもしれません。

コメント

タイトルとURLをコピーしました