6

More than 5 years have passed since last update.

@AsagiriDesign(Atsushi Asagiri)

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

Last updated at 2018-09-23Posted at 2018-09-23

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

背景

工数かけずに簡単にパララックス効果を入れたい
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.

6

Register as a new user and use Qiita more conveniently

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

6