2013年5月29日
今さら聞けないWebデザイン。パララックスって、なに？
【読了2分】
なんて会話をクリエイターとした時に
「へ、へえ、いいですね！パララックスにしましょう！（なんだパララックスって、あとでggr・・・・）」
って思っている方がまだいらっしゃるかもしれません。
なので、今回は今さら聞けない！って人のために簡単にパララックスを説明します
■パララックスを直訳してみると
「視差」です。
視差効果とは、視界が移動する際に各物体がそれぞれ異なったスピードでスクロールすることにより、奥行き感を演出する効果を意味します。
との事です。
まぁ、「奥行きを表現する」ってイメージを持ってもらえればよいと思います。
■どうやって作っているのか
・jQueryをつかってます
どういうことかというと、「スクロール値を取得」「Position値を変更」とか「CSSだけで動かしてみる」とか、まぁいわゆるプログラムを組まないといけません。
プラグインとかもあるのですが、端的にいうと「ちゃんとした技術」が必要です。
簡単に作っているわけではない、ってことです。
■結局どんなサイトか見てみないとわからないからサイト紹介する
高さを表現したいスカイツリーにとってこのパララックス効果はすごく相性の良い見せ方ですね。
日本のサイトではありませんが、おなじみ任天堂のマリオカートのサイトです。
横スクロールになっていますが、マリオカートを表現していてこちらも相性が良い使い方ですね。
【α CLOCK】
SONYの隠れたWebサイト。
世界各地の写真を使い、音楽も流しています。
"簡単にまとめ"
・パララックスは技術が必要・スクロールしたら背景も動くやつ・相性の良い使い方をしましょう
と、すごく簡単にまとめるとこんな感じでしょうか。
クリエイターとよく相談して使いましょう。
最後に、この記事の最初の日本代表ってなに？って思われた方もいるかもしれません。
答えはこのサイトもパララックス使ってますヨ、ということです
Webコンサルタント 佐藤司 →facebookアカウント
- Permalink
- by 佐藤司
- at 14:24
- Trackbacks (0)
