HTML/CSS

【パララックス効果】背景画像固定をCSSのみで実装する方法【簡単】

 

背景画像を固定する「パララックス効果」を使ったページ作成についてです。

パララックス効果とは「一部の要素を固定して、前の要素だけが動く」デザインで、おしゃれなウェブサイトでよく見かけます。

 

パララックス効果を使うと、こんなページだって作れてしまいます・・。

 

これは、凄いですよね。こんなサイトを見ると、僕も作りたい!ワクワクしてきます。

 

 

以前に僕はパララックス効果についてツイートをしていました。

この頃はパララックス効果という言葉も知りません。


このツイートを参考に、実装してみました。

今回は、CSSだけで作るパララックス効果について書いてみたいと思います。

 

CSSで作るパララックス効果


ツイートをみてもらえればわかりますが、背景画像が固定され、前面の要素だけがスクロールされているのがわかります。

ポイントとしては、以下のCSSを記述します。

height:◯◯;
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center center;

 

今回は、divで囲った要素に対してCSSを記述して実装しました。

background-attatimentを記述するだけで、背景画像が固定され、簡単にパララックス効果が実装できてしまいます。

 

注意:iphoneではうまく機能しない

この便利なbackground-attatimentですが、iphoneではうまく機能しないみたいです。つまり、スマホ対応してないってことですね。

 

レスポンシブ対応が必須の時代に、スマホだとうまく動かなければ意味がない・・。そこで、他に実装する方法がないのか調べてみました。

 

✔︎参考サイト

 

パララックスを実装する方法としては、以下の4つの方法になりそうです。

  1. css:background-attatiment
  2. css:position: fixed;
  3. jQuery
  4. javascriptライブラリ

CSSで実装する場合、①だとスマホ対応は難しそうだし、②だと複数のセクションに実装するのは難しそうなイメージ(まだ②はやってないのでわかりませんが)

 

なので、今度はjQueryでパララックス効果を実装してみたいと思います。

今回は、CSSの簡単な方法のみ記事にしてみました。

 

✔︎参考サイト