CSS Web制作

CSSのみでスマホ対応のパララックスを作る方法【サンプル付きで解説】

※ 当サイトではアフィリエイト広告を利用しています

スマホ対応のパララックスってCSSだけで作れる?

パララックスが何かというのは説明するより後で見て貰った方が早いと思いますが、パララックスとは日本語で言えば視差効果の事になります。

これは『スクロールしても背景画像を固定されている』という状態になります。

ただし実装方法によってはPCでは上手く出来てもスマホでは反映されないという事があります。

そこで今回はスマホでもパララックスになるような実装方法を解説していきます。

背景画像ではなく、imgタグでパララックスを実装したい方は以下の記事を参照下さい。

あわせて読みたい
スマホ対応パララックス『simpleParallax.js』の使い方【サンプル付きで解説】
スマホ対応パララックス『simpleParallax.js』の使い方【サンプル付きで解説】

続きを見る

他にもパララックスに関する記事は3記事あるので、用途によって使い分けてみて下さい。

Luxy.jsでパララックスと慣性スクロールを実装する方法はこちら。

あわせて読みたい
Luxy.jsでパララックスと慣性スクロールを実装する方法【JavaScriptのプラグイン】
Luxy.jsでパララックスと慣性スクロールを実装する方法【JavaScriptのプラグイン】

続きを見る

Swiperでパララックススライダーを作る方法はこちら。

あわせて読みたい
【Swiper】パララックススライダーを作る方法【サンプル付き】
【Swiper】パララックススライダーを作る方法【サンプル付き】

続きを見る

GSAPを使ってパララックスを作る方法はこちら。

あわせて読みたい
【GSAP】パララックスをScrollTriggerを使って実装する方法【アニメーションのサンプルあり】
【GSAP】パララックスをScrollTriggerを使って実装する方法【アニメーションのサンプルあり】

続きを見る

 

完全無料のプログラミングスクール『ZeroPlus Gate』
30日間でWeb制作を学べる無料のプログラミングスクールがこちら
  • 30日間でWeb制作を学べる
  • 完全無料
  • 現役エンジニアへの質問無制限
  • オンラインの動画学習なので時間場所を問わず勉強可能
  • 最大4回の学習サポート面談
  • 受付は1日25名までの先着制
無料なのに専属のメンターが付き、現役エンジニアへの質問も無制限という破格のサービスです。
いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適。
現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇

\ 完全無料 /

ZeroPlus Gate公式サイト

先着1日25名まで!

CSSのみでスマホ対応のパララックスを作る方法

背景を固定するCSSのプロパティにbackground-attachment: fixed;がありますが、これだとスマホでは固定されません。

こちらがそのデモになります。

See the Pen
Untitled
by junpei (@junpei-sugiyama)
on CodePen.

スクロールすると背景画像は固定されていますが、それ以外はスクロールされています。

この視差効果のことをパララックスと言います。

しかしPCでは問題ありませんが、スマホだと固定されていないのが分かります。

そこで次はスマホ対応にするためにbackground-attachment: fixed;ではなくposition: fixed;を使います。

早速デモを見てみましょう。

See the Pen
CSSのみでパララックス
by junpei (@junpei-sugiyama)
on CodePen.

こちらはスマホでもPCと同じように背景が固定されています。

HTMLは特に変わったところはありませんが、最初と同様に真ん中の要素を背景画像にしていきます。

<div class="container">スクロールして下さい</div>
<div class="parallax"></div>
<div class="container"></div>

CSSはこちらです。

.container {
  background-color: #1cb4d3;
  color: #f0f0f0;
  font-size: 26px;
  font-weight: 700;
  height: 400px;
  padding-top: 50px;
  text-align: center;
}

/* 背景画像の見えている高さ */
.parallax {
  height: 500px;
}

/* 背景画像 */
.parallax::before {
  background-image: url(画像パス);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  content: "";
  height: 100vh;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: -1;
}

固定する背景画像は擬似要素を使って表示します。

ポイントは擬似要素の方ではz-index: -1;にして他の要素の下に来るようにするところです。

これがないと画像が他の要素より上に来てしまいます。

以上になります。

あわせて読みたい
スマホ対応パララックス『simpleParallax.js』の使い方【サンプル付きで解説】
スマホ対応パララックス『simpleParallax.js』の使い方【サンプル付きで解説】

続きを見る

Web制作おすすめ教材と案件獲得サービス
当ブログではWeb制作学習におすすめの教材を厳選してご紹介しています。
こちらの記事を参考に教材を購入して成果を出している人もたくさんいるので、自分に必要な教材を探してみて下さい。
また、学習面だけでなく営業面である案件獲得サービスもご紹介しています。
スキルが身についても仕事がなければ意味がないので、営業に不安がある人はこちらの記事をぜひ参考にしてみて下さい。
この記事を参考にスキルと営業力を身につけて稼げるようになりましょう!

-CSS, Web制作
-