パララックスを実装する際の参考サイトまとめ

今回はパララックスを効果的に使っている参考サイトをまとめました。

色々なパターンがあるので見ているだけで楽しめます。

これから作るサイトに取り入れてみるとインパクトがあるかもしれませんね。

 

MELANIE.F

http://melanie-f.com/en/

スリッパを作成している会社のサイトですが、ページを開いた瞬間からパララックス効果全開です。

スクロールも通常よりふわふわした演出になっており、背景模様の浮遊感やタイポグラフィも相まって心地よい雰囲気が出ています。

 

UBER EATS

https://kitchensofubereats.com/

一度は聞いたことがあるであろうUBER EATSのサイトです。

画像には薄くbox-shadowがかかっており、浮遊感や奥行きを演出しています。

要素ごとのスクロールによる移動スピードも違うので少し不思議な感覚になります。

 

Porsche Volution

http://porschevolution.com/#undefined

ポルシェの歴史を辿ったサイトです。

スクロールすると年代ごとの車の表示がどんどん切り替わっていきます。

車が表示されている場所は常に同じになるようにパララックスを取り入れているので、移り変わりがとても自然に見えます。

 

vestfrost

http://vestfrost.ua/en

冷蔵庫メーカーのサイトです。

ページ全体にパララックスによる効果が散りばめられており、スクロールしていくにつれてどんどん新しい効果が現れます。

細かい部分にもパララックスが取り入れられており、インパクトがあります。

 

LEXUS LS

https://www.lexus.com.sg/en/models/ls.html

レクサスのサイトです。

全体的に大きな要素がパララックスしているのでインパクトは抜群。

レクサス自体が先進的な車なので、その雰囲気に合わせたサイトをパララックスを取り入れて表現しています。

 

Webflow

https://webflow.com/ix2

ウェブサイト作成サービスであるWebflowのLPです。

全体にパララックスを取り入れていてサイトの雰囲気をうまく表現しています。

図形を浮遊させるパララックスはやはり幻想的に見えますね。

 

EGWINECO

https://egwineco.com/

缶ワインを取り扱っているサイトです。

パララックスによる缶の色が変わるところが特におしゃれですね。

全体的にパララックス効果をうまく取り入れているサイトです。

 

Interior Design by Decade

https://www.harveywatersofteners.co.uk/history-interior-design

インテリアデザインを振り返るというサイトです。

パララックスによりスクロールすると中心から円の形に広がって次のページが表示されます。

 

Flip Scipio

https://flipscipio.com/

ギター職人のサイトです。

派手な効果や演出はありませんが、パララックスの基本をうまく取り入れてまとめています。

初心者でも似たような演出の実装は難しくないと思うので参考にするといいと思います。

 

GOLDA

https://www.goldaglida.co.il/

アイスをメーカーのサイトです。

こちらもあまり派手な演出はありませんが、細かい部分にパララックスが取り入れられており、サイトの雰囲気を崩すことなくオシャレに演出しています。

 

Lenno Slides

https://www.market-me.fr/lenno

パララックスと影による奥行きがうまく表現されているサイトです。

大きな動きをしながらも、バランスを崩していない程度に抑えられた効果がサイトの雰囲気をより引き立てています。

 

THE SURVIVAL KIT

http://agencysurvivalkit.com/

最初の画面でスクロールすると箱のフタが開くようになるパララックスを取り入れています。

他にも、クリックによる画像スライダー+パララックスといった効果も取り入れられており、なかなかインパクトがあるデザインとなっています。

 

FIREWATCH

http://www.firewatchgame.com/

ミステリーゲーム「FIREWATCH」のサイトです。

ヘッダー部分のパララックスによって遠近感がうまく演出されています。

大きな演出はないものの、このパララックスがあるのとないのとでは大きく雰囲気が違うような気がします。

 

HOT BOX

https://hotboxsaunastudio.com/

背景のグラデーションが美しいパララックスを取り入れたサイトです。

柔らかいパララックス効果と淡い色をメインとしたグラデーションによる透明感が目を引くデザインです。

 

終わりに

パララックスは見ているだけでも楽しいですが、自分のサイトに取り入れてみるとさらに楽しくなるのではないかと思います。

パララックスも演出の仕方は無数にあるので、色々なサイトを参考にして美しいパララックスを実装できるようになったら最高ですね。