こんにちは！

１週間の半分以上は新幹線で過ごしているながやです。

飛行機が苦手なので長距離でも新幹線を利用しています。

電源があればどこでも作業できるという、良いのやら悪いのやら。

現在、パララックスの処理を実装していますので、今回は技術系の内容にしようかなと思います。

流行っていた頃からは少し過ぎた感じもありますが、フラットなサイトをリッチに彩るには、まだまだ現役です！

パララックスは、基本的にクライアントサイドのリソースをごりごり浪費するため、ユーザビリティの低下に繋がる場合が多いので、個人的には敬遠していた機能です。

大抵の場合、JavaScript の処理は、jQuery を利用してさくっと完成でしたが、今回はオリジナルの処理が多く、スクラッチで書いています。

パララックスとは

パララックスとは日本語で「視差」という意味を指す言葉です。元来は写真用語で、レンズとの位置関係のズレにより、ファインダーと実際に撮影される画面に、位置ずれが生じる現象のことです。

Webサイトにおけるパララックスとは、スクロール動作に同期して、グラフィックスやテキストにスライドの動作を与えたり、複数のレイヤーにある視覚要素を異なるスピードで動かすことで視差を生み出し、立体感や奥行きを演出する手法を指します。

実際に機能を体験した方が分かりやすいと思うので、代表的なサイトをいくつか紹介したいと思います。

パララックスなサイトその１.東京スカイツリー

東京スカイツリーのサイトはこちら

パララックスといえば、ここですね。フラットデザインが主流になってパララックスの処理も少しずつオミットされていますが、動きます。

パララックスなサイトその２.日産ノート

日産ノートのサイトはこちら

頑張ってスクロールしないと全てのパララックスを確認できないサイト。横のスクロールバーの長さに心折れそう。離脱率が気になります。

パララックスなサイトその３.東京タワーズ

東京タワーズのサイトはこちら

東京タワーを題材として様々な時間や場所から撮られた風景を展示しているサイトです。眺めていると東京タワー周辺に観光したくなりますね。

でも、長いよ、スクロール＼(^o^)／

パララックスなサイトその４.Nike

jQuery のプラグインとして紹介しているサイトはこちら

パララックスの発祥といえば、やはりNikeのサイトでしょう。現在では完全にオミットされましたが、プロモーション用のサイトでは、たまに見かけます。こちらはそのパララックスの jQuery のプラグインを作成されているサイトです。

実際の動作はデモページから確認できます。

Nikeと同様なパララックスを確認できるページはこちら

いかがでしたか？

今回は、パララックスの代表的な機能をご紹介しました。

次回は、実際に機能を実装するにあたり、ポイントやノウハウについて、まとめてみたいと思います。

以上、ながやでした。