4
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

簡単にCSS1行だけで背景画像をパララックスする。

Last updated at Posted at 2018-09-23

LPなどで見るパララックス(視差)効果を簡単に出す方法

parallax.gif

背景

  • 工数かけずに簡単にパララックス効果を入れたい
  • jsは使わない

施術

  • 背景画像のCSSに background-attachment: fixed を記述するだけです

備考

  • IEも11であればbackground-attachmentは対応しています
  • 仮にbackground-attachmentが効かない環境であれば、ただ単に視差効果が作動せず、普通のスクロールになるだけですので、基本的にはクライアントにご理解いただいた上でフォールバックの必要もあまり無いでしょう
    https://caniuse.com/#feat=background-attachment

実装コード

See the Pen OneLine Parallax by Asagiri (@agdg) on CodePen.

4
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?