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

blog_1

こんにちは!

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. スクリーンショット 2014-03-23 22.17.35
  2. pixta_13193056_M
  3. 2013/10/12

    犠牲祭
  4. imgres-1
  5. default_462c33fd14f9ee70d892472609b8e868
  6. スクリーンショット 2014-03-09 15.56.23
  7. mobu
  8. バードマン3

ピックアップ記事

  1. %e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-03-23-14-32

    2016-10-5

    毎回気になるテレビ朝日「仮面ライダー」の新ヒロイン!!!今回は今後期待のあの子!!!

    出典:http://www.tv-asahi.co.jp/ex-aid/  【テレビ朝日「仮面ライダ…

ピックアップ記事

  1. 自由の女神

    2015-9-18

    アメリカでサルバドール・ダリを見てきました。

    こんにちは!9月5日〜11日までアメリカに行ってきました。ツアーの詳細を全く確認せずに旅だったので、…

ピックアップ記事

  1. p021451522_480

    2016-11-14

    中目黒おすすめバー特集 Part.1

    中目黒にはオシャレなお店がたくさん。 服や雑貨、レストランだけでなく、 オシャレなバーもたくさんある…
ページ上部へ戻る
Top