思わずスクロールしたくなる!パララックスサイト

トピックス

この記事は約 2 分で読めます

思わずスクロールしたくなる!パララックスサイト

パララックスサイト

最近よく耳にする言葉ですね。
どうもJです。
 
パララックスとは、視差効果による演出をweb上に取り入れることによって奥行きを表現するエフェクトです。
パララックスの流行は意外に古くてWebデザインのトレンドとして2010年頃からじわじわと流行り始めました。
 
大きな特徴は、スクロールエフェクト等と合わせて使うことによってweb上の背景やコンテンツに変化を与え、ワンスクロール型のストーリー性や展開を持たせることができたり、ビジュアル・文字に動きを出せたりすることができます。
 
今ではファッション系のサイトや音楽・芸術アーティストの公式サイト、または企業のブランディングサイト・リクールとサイトなど様々なWEBサイトで使用されています。

そこで今回は、パララックス・スクロールエフェクトを使ったイケてるサイトをいくつかご紹介します。


parallax

MANUFACTURE D’ESSAI

女性シューズブランドサイト。
パララックスの王道の様な動きで、前面のテキストと奥の背景画像との奥行き感を表現しています。


parallax-2

Suː5 / スー

マスクのサイト
見ていて気持ちのいいスピードでメインイメージがスライドします。
スクロールしていくとでてくるイメージの浮遊感がたまりません。


parallax-3

Leader Bikes x Undefeated ピストレーシングチーム

ブラック基調のサイト。メインイメージを背景固定し、斜線で切った要素がスライドインしてくる「Riders」コンテンツの動きなんかはまさにアスリート系のサイトに多そうな動きです!


 
今回は3つだけのご紹介でしたが、また見ていてハッとなったサイトがあれば2弾、3弾とご紹介していきたいと思います!

Writer.

この記事を書いた人

大伴 純平

大伴 純平

「webページの表示をユーザーが待つのは2秒まで」という技術者に突きつけられた課題をクリアするため、ページ速度を改善する方法を独自に研究。
“webパフォーマンスという考え方でのページ表示速度最適化・ユーザー体験の向上”をテーマに、多くの企業に対してwebサイトの高速化に向けたアドバイスと改善を行っている。「HTML5 認定プロフェッショナル」の有資格者。フューチャーショップのパートナー企業として「futureshop」や「commerce creator」を使ったECサイト構築で多数の実績がある。

前の記事を見る

『歌うクジラ』村上龍

次の記事を見る

常時SSL化 (https化)について

SNS SHARE