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

こんにちは!

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. 2013/8/7

    モテ期

ピックアップ記事

  1. 2016-10-25

    へっぽこデザイン備忘録〜CSSだけで簡単にランキング順位を表示させる方法〜

    夏にコートを捨ててしまったので、早く買いに行かないと死ぬかもしれません。 去年は掛け布団を捨てて凍…

ピックアップ記事

  1. 2016-9-7

    狂気あふれる話題のゲーム『Year Of The Ladybug』最新トレイラー本日公開!初公開イラスト、制作陣コメント有り!

    狂気溢れる話題のインディーゲーム!最新トレイラー本日公開!! https://www.youtub…

ピックアップ記事

  1. 2016-5-12

    噂のダンシングクラブに行ってみました!

    みなさま、こんにちは!ちっひーです!!月金をお休みをすれば、10日もお休みになるという長…
ページ上部へ戻る
Top