パララックスの難しさ

post on 2020/05/24

カテゴリー:ホームページ

javascriptパララックス

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

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

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

大きな画像が必要となる

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

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

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

描画に影響を与える

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

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

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

トップページに戻る