究極のパララックスサイトを作るなら1度はparallax.jsを見るべし!

parallax
  • URLをコピーしました!

特殊なメガネをかけて見る3Dテレビや、裸眼で立体的に見えるゲームスマホが流行ってきた頃、WEBデザイナーApple3Dなんて必要ないと言わんばかりに”視差効果“を使ったデザインが流行りだしたことを今でも覚えています。
WEB2.0と言われていた時代には、凹凸や影を付けて立体的に見せるデザインが流行っていましたが、今ではフラットデザインになり、マウスカーソルの動きやスクロール、ジャイロセンサーの動きに合わせて視差効果を出しています。

視差(しさ)は、二地点での観測地点の位置の違いにより、対象点が見える方向が異なること、または、その角度差。
パララックス (英:parallax)ともいう。

視差 – Wikipedia
目次

parallax.js

日本でパララックスがまだ主流でなかった頃、あるWEBサイトを見てとても衝撃的だったのを覚えています。
スクロールするだけのWEBサイトなんて、無料のテンプレートを配布しているほど数多く存在しますが、究極のパララックスと呼ぶべきサイトがこちら!

parallax.js
parallax.js

parallax.jsの凄いところは、PCはマウスカーソルスマホジャイロセンサー(傾き)でそれぞれ両方の動きに反応するようになっていて、画面の向きも縦横選ばず、どんな解像度にも対応していること。
しかも、デザインだけでなく、CSS3アニメーションを駆使しているので、見て触るだけでとても気持ちいです。
これ作った人、まさに天才だと思いました。
ダウンロード、使い方はこちらから。

ちなみにAppleならiOSで話題になった壁紙視差効果ですね。
今ではバッテリーが消耗するということで嫌がられているみたいですが…。

iOS 視差効果
iOS 視差効果

出典:iOS 7: Instead of Flatness, We Got Depth

WEBデザインのトレンド

最後に革新的なWEBデザインを集めたサイト”Awwwards“から少しだけ紹介します。

AWWWARDS
AWWWARDS

Adult Swim – Elastic Man

いかがでしたでしょうか?
残念ながら需要はあまりないように感じますが、こんな凄いサイトを見ると刺激を受けて作りたくなってしまいます

著:CodeMafia 外村将大
¥1,639 (2024/04/22 03:55時点 | Amazon調べ)
\楽天ポイント4倍セール!/
楽天市場
\ポイント5%還元!/
Yahooショッピング
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

CAPTCHA


目次