パララックスの難しさ

パララックスとはページスクロールに合わせて背景画像を動かすテクニックです。

パララックスの利点はページに奥行きが生まれることによって空間のように感じられ、世界観が作れること。
簡単に言ってしまうとかっこいい。
反面パララックスにはデメリットもたくさんあります。

パララックスのデメリット

大きな画像が必要となる

パララックスの表示領域は横幅はブラウザに対して100%、高さはサイズを指定します。
ブラウザの横幅100%と表示領域以上の画像サイズが必要となるため、かなり大きな画像を使用します。
これが画面のロード速度を落とします。

表示領域の縦横比が変わる

高さが固定されており、横幅は画面サイズに依存するため、表示領域の縦横比が固定されません。
ブラウザの幅が狭ければ正方形に近い形になるでしょうし、広ければ極端に横長な表示領域になります。
これに画像がマッチするかはやってみないとわかりません。
写真によっては奥行き感が出ないため、素材が1つしかない場合思った効果が得られない可能性もあります。

描画に影響を与える

描画とは、ホームページのテキストや画像をダウンロードして、それをブラウザに表示させる作業です。すべての要素がダウンロードされてから描画が終了する時間もページのロード時間にカウントされます。
またIE11など古いブラウザだとガクガク動いたりしてしまいます。
表示時速度が落ちる点、動作がブラウザによって異なる点もパララックスのデメリットと言えるでしょう。

上記以外にも最初のインパクトこそあれど、2回目以降も好印象を持つために役立つのかどうかも考える必要があるでしょう。

個人的にはパララックスには否定的ですが、例えば特定の絵本サイトなど、非現実的な世界観を演出したい場合は使っていきたい技術です。

ブログ一覧へ戻る
松下 正平のプロフィール写真
            

この記事の著者

松下 正平

2002年より大阪を拠点に活動。仕様の行間を読み「よきにはからう」実装力をモットーとするWeb制作・WordPress開発のフリーランス。
2019年に大阪市内から枚方市に移転。
近年はLooker Studioを活用したアクセス解析にも力を入れています。

趣味

趣味は息子とのサッカー、及びサッカー観戦。ガンバ大阪好き。
好きなアイドルはBABYMETALとsora tob sokana。
現在はまっているゲームは「スプラトゥーンレイダース」
無限食堂437階をあたりを探索中。

コーディングのご依頼お待ちしております

Wordpressの構築やレスポンシブ化など人手が欲しい時はぜひお声がけください。

このブロックが表示されている時は条件が合えば即日作業が開始できます。お気軽に条件をお送りください。

制作会社様向け詳細はこちら
両手いっぱいに広げ、コーディング案件を待っているメタラー