思わずスクロールしたくなる!パララックスサイト
パララックスサイト
最近よく耳にする言葉ですね。
どうもJです。
パララックスとは、視差効果による演出をweb上に取り入れることによって奥行きを表現するエフェクトです。
パララックスの流行は意外に古くてWebデザインのトレンドとして2010年頃からじわじわと流行り始めました。
大きな特徴は、スクロールエフェクト等と合わせて使うことによってweb上の背景やコンテンツに変化を与え、ワンスクロール型のストーリー性や展開を持たせることができたり、ビジュアル・文字に動きを出せたりすることができます。
今ではファッション系のサイトや音楽・芸術アーティストの公式サイト、または企業のブランディングサイト・リクールとサイトなど様々なWEBサイトで使用されています。
そこで今回は、パララックス・スクロールエフェクトを使ったイケてるサイトをいくつかご紹介します。
女性シューズブランドサイト。
パララックスの王道の様な動きで、前面のテキストと奥の背景画像との奥行き感を表現しています。
マスクのサイト
見ていて気持ちのいいスピードでメインイメージがスライドします。
スクロールしていくとでてくるイメージの浮遊感がたまりません。
Leader Bikes x Undefeated ピストレーシングチーム
ブラック基調のサイト。メインイメージを背景固定し、斜線で切った要素がスライドインしてくる「Riders」コンテンツの動きなんかはまさにアスリート系のサイトに多そうな動きです!
今回は3つだけのご紹介でしたが、また見ていてハッとなったサイトがあれば2弾、3弾とご紹介していきたいと思います!
Writer.
この記事を書いた人
大伴 純平
「webページの表示をユーザーが待つのは2秒まで」という技術者に突きつけられた課題をクリアするため、ページ速度を改善する方法を独自に研究。
“webパフォーマンスという考え方でのページ表示速度最適化・ユーザー体験の向上”をテーマに、多くの企業に対してwebサイトの高速化に向けたアドバイスと改善を行っている。「HTML5 認定プロフェッショナル」の有資格者。フューチャーショップのパートナー企業として「futureshop」や「commerce creator」を使ったECサイト構築で多数の実績がある。