パララックス効果(英: parallax effect)をご存知ですか。
別名「視差効果」とも呼ばれ、Webデザインで利用されている、エフェクトのひとつです。
複数のイメージ画像のスクロールするスピードを調整することで、奥行きのある立体的な空間を生み出す、アニメーションを得意としたエフェクトとなります。
今回は、海外デザインブログfavbulousで、比較的新しく公開された、パララックス効果を利用したWebサイトを14個まとめたエントリー「14 Impressive Parallax Scrolling Website Showcase Inspiration」が公開されていたので、こちらを中心に、パララックス効果全般についてまとめています。
一緒にパララックス効果に使える、無料プラグインなどもまとめていますので、Webサイト制作に活用してみてはいかがでしょう。
詳細は以下から。
パララックス効果を使った、ユニークなWebサイトデザインまとめ
[fancy_box]パララックス効果は、見て、触ってたのしむWebサイトデザインです。
サムネイルをクリックすると、別ウィンドウが開きますので、一度ご覧になるとより分かりやすいかもしれません。[/fancy_box]
イタリア拠点に活動している、女優さんのウェブサイトデザイン。
スクロールすることと、コンテンツがふんわりと出現し、フォントとの組み合わせも◎。
ファッションブランドに関するウェブサイトデザインで、新作商品のユニークな紹介方法が魅力的。
コンテンツごとにコンセプトを変更しながら、制作実績などを紹介するポートフォリオサイト。
Nikeのクリエイティブなコンテンツの展開力を見せつけた、立体感たっぷりなスニーカーの紹介ページ。
新型ビートルの製品プロモーション用Webサイト。
車の歴史をコミカルなアニメーションで表現した、見ていて飽きないサイトです。
こちらも自動車に関するWebサイトデザインとなっており、パーツごとに詳しく、そしてたのしく説明したサイトです。
パララックスデザインがよく利用されている業種のひとつが、デジタル家電系です。
こまかい説明も、アニメーションを加えることで、よりユーザーにも分かりやすくなりますね。
上下、左右あらゆる方向にコンテンツがスルスルーと展開する、Webサイトデザイン。斜めの切りかえしもオシャレ。
iPhoneなどのデバイスが、グルグルと回転しながら次のコンテンツに移動するWebサイトデザイン。
自分の生い立ちや育った街、旅行の訪問先など、心に残ったことをテーマに作成されたWebサイト。 こういうの、いいですね。
鞄を中心に販売している、ブラジルの会社Webサイト。ユニークなエフェクトで、色やサイズなどを選択できます。
Soleil Noir 2012 | We believe in…
イラストとアニメーションを組み合わせた、かわいいWebサイト作品。
右側のカラフルなパレットをえらぶと、コンテンツに移動します。
ユニークな視差アニメーション効果を利用したWebサイトデザイン21個まとめ
こちらでもパララックス効果を使った、Webサイトまとめています。
パララックス効果に関連する記事まとめ
[list type=”star”] [li]スクロールに応じて要素がアニメーションする、視差効果（パララックス）を取り入れたWebデザイン例とTipsいろいろ – かちびと.net [/li]
[li]最近話題のパララックス効果を利用したアニメーションとデザインのキレイな国内・海外サイトまとめました – Webデザインクリップ[/li]
[li]Behind The Scene of Nike Better World – Smashing Coding[/li][/list]
無料ダウンロード可、プラグイン関連まとめ
パスにそって、縦横無尽なアニメーションを実装可能なプラグイン。
プレゼンテーションなどにも活用することができそうです。
[button_square color=”red” url=”http://joelb.me/scrollpath/”] デモページ [/button_square]
jQuery Scrolldeck parallax Plugin
背景画像とテキストコンテンツなどのスクロール速度を変化させて、奥行き感を演出するプラグイン。
[button_square color=”red” url=”http://johnpolacek.github.com/scrolldeck.js/decks/parallax/”] デモページ [/button_square]
CSS3アニメーションを使って、パララックス効果だけでなく、Appleウェブサイトのようなエフェクトにも対応したプラグイン3種類セット。
[button_square color=”red” url=”http://www.sequencejs.com/”] デモページ [/button_square]
スクロールするすべての要素にパララック効果を利用でき、iOSにも対応しています。
[button_square color=”red” url=”http://markdalgleish.com/projects/stellar.js/”] デモページ [/button_square]
デモページではテキスト文字を中心に、ズームや回転などのアニメーションが実現されています。
[button_square color=”red” url=”http://johnpolacek.github.com/scrollorama/”] デモページ [/button_square]
コンテンツが上からスルスルーと切り替わるプラグイン。左下設置の矢印ボタンが、地味に便利、。
[button_square color=”red” url=”http://curtain.victorcoulon.fr/”] デモページ [/button_square]
Parallax Content Slider w/ CSS3 and jQuery
パララックス効果に対応したスライドショー用プラグイン、Colissさんの記事で詳しく解説されています。
[button_square color=”red” url=”http://tympanus.net/Development/ParallaxContentSlider/”] デモページ [/button_square]
サムネイル付で、しかもパララックス効果にも対応した、フル機能のスライダー用プラグイン。
[button_square color=”red” url=”http://tympanus.net/Tutorials/ParallaxSlider/”] デモページ [/button_square]
[参照元 : 14 Impressive parallax Scrolling Website Showcase Inspiration – favbulous]
