パララックスを使ってサイトをリッチにしてみよう!

こんにちは!

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

 

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

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

 

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

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

 

 

blog_1

 

 

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

 

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

 

 

 

パララックスとは

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

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

 

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

 

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

blog_2

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

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

 

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

blog_3

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

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

 

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

blog_4

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

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

でも、長いよ、スクロール\(^o^)/

 

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

blog_5

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

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

 

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

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

まとめ

いかがでしたか?

 

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

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

 

以上、ながやでした。

関連記事

コメントは利用できません。

ピックアップ記事

  1. 2016-8-3

    シン・ゴジラの感想‼︎庵野監督がエヴァより先に作った映画‼︎‼︎

    引用:https://www.toho.co.jp/movie/lineup/godzilla201…

ピックアップ記事

  1. 2016-9-7

    フリースタイルダンジョンはなぜ流行ったのか??初心者でもわかるラップの楽しみ方!!!!

    引用:http://www.tv-asahi.co.jp/freestyledungeon/ なぜ今…

ピックアップ記事

  1. 2016-6-28

    【売れっ子への道渋滞中】若手芸人高齢化について考える。其の一

    若手といえば何才くらい?テレビで体を張って笑いを取る若手芸人たち。「若手」という言葉を聞けば、誰もが…
ページ上部へ戻る
Top