howtoparallax_top

スポンサーリンク

 

 

パララックス効果(英: parallax effect)をご存知ですか。

 

別名「視差効果」とも呼ばれ、Webデザインで利用されている、エフェクトのひとつです。

 

複数のイメージ画像のスクロールするスピードを調整することで、奥行きのある立体的な空間を生み出す、アニメーションを得意としたエフェクトとなります。

 

 

 

今回は、海外デザインブログfavbulousで、比較的新しく公開された、パララックス効果を利用したWebサイトを14個まとめたエントリー「14 Impressive Parallax Scrolling Website Showcase Inspiration」が公開されていたので、こちらを中心に、パララックス効果全般についてまとめています。

 

 

一緒にパララックス効果に使える、無料プラグインなどもまとめていますので、Webサイト制作に活用してみてはいかがでしょう。

 

 

 

詳細は以下から。

 

 

 

パララックス効果を使った、ユニークなWebサイトデザインまとめ

 

[fancy_box]パララックス効果は、見て、触ってたのしむWebサイトデザインです。

サムネイルをクリックすると、別ウィンドウが開きますので、一度ご覧になるとより分かりやすいかもしれません。[/fancy_box]

 

 Anna Safroncik

イタリア拠点に活動している、女優さんのウェブサイトデザイン。

スクロールすることと、コンテンツがふんわりと出現し、フォントとの組み合わせも◎。

10parallax_scroll

 

 

 

Krystalrae

ファッションブランドに関するウェブサイトデザインで、新作商品のユニークな紹介方法が魅力的。

4parallax_scroll

 

 

 

OK Studios

コンテンツごとにコンセプトを変更しながら、制作実績などを紹介するポートフォリオサイト。

1parallax_scroll

 

 

 

Air Jordan 2012 – AJ2012

Nikeのクリエイティブなコンテンツの展開力を見せつけた、立体感たっぷりなスニーカーの紹介ページ。

3parallax_scroll

 

 

 

Volkswagen Beetle

新型ビートルの製品プロモーション用Webサイト。

車の歴史をコミカルなアニメーションで表現した、見ていて飽きないサイトです。

14parallax_scroll

 

 

 

SmartUSA

こちらも自動車に関するWebサイトデザインとなっており、パーツごとに詳しく、そしてたのしく説明したサイトです。

13parallax_scroll

 

 

 

Sony Tablet S

パララックスデザインがよく利用されている業種のひとつが、デジタル家電系です。

こまかい説明も、アニメーションを加えることで、よりユーザーにも分かりやすくなりますね。

11parallax_scroll

 

 

 

Kryptis

上下、左右あらゆる方向にコンテンツがスルスルーと展開する、Webサイトデザイン。斜めの切りかえしもオシャレ。

6parallax_scroll

 

 

Atanai Plus

iPhoneなどのデバイスが、グルグルと回転しながら次のコンテンツに移動するWebサイトデザイン。

8parallax_scroll

 

 

 

Edits Quarterly x Ian Coyle

自分の生い立ちや育った街、旅行の訪問先など、心に残ったことをテーマに作成されたWebサイト。 こういうの、いいですね。

7parallax_scroll

 

 

 

Kipling – Bem Vindo!

鞄を中心に販売している、ブラジルの会社Webサイト。ユニークなエフェクトで、色やサイズなどを選択できます。

9parallax_scroll

 

 

 

Soleil Noir 2012 | We believe in…

イラストとアニメーションを組み合わせた、かわいいWebサイト作品。

右側のカラフルなパレットをえらぶと、コンテンツに移動します。

2parallax_scroll

 

 

 

ユニークな視差アニメーション効果を利用した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]

 

 

 

 

無料ダウンロード可、プラグイン関連まとめ

 

jQuery Scroll Path

パスにそって、縦横無尽なアニメーションを実装可能なプラグイン。

プレゼンテーションなどにも活用することができそうです。

scrollpath

[button_square color=”red” url=”http://joelb.me/scrollpath/”] デモページ [/button_square]

 

 

 

jQuery Scrolldeck parallax Plugin 

背景画像とテキストコンテンツなどのスクロール速度を変化させて、奥行き感を演出するプラグイン。

parallax

[button_square color=”red” url=”http://johnpolacek.github.com/scrolldeck.js/decks/parallax/”] デモページ [/button_square]

 

 

 

Sequence

CSS3アニメーションを使って、パララックス効果だけでなく、Appleウェブサイトのようなエフェクトにも対応したプラグイン3種類セット。

Sequence.js---The-jQuery-Slider-Plugin-with-Infinite-Style

[button_square color=”red” url=”http://www.sequencejs.com/”] デモページ [/button_square]

 

 

 

Stellar.js

スクロールするすべての要素にパララック効果を利用でき、iOSにも対応しています。

stellar

[button_square color=”red” url=”http://markdalgleish.com/projects/stellar.js/”] デモページ [/button_square]

 

 

 

Scrollorama

デモページではテキスト文字を中心に、ズームや回転などのアニメーションが実現されています。

scrollorama

[button_square color=”red” url=”http://johnpolacek.github.com/scrollorama/”] デモページ [/button_square]

 

 

 

Curtain.js

コンテンツが上からスルスルーと切り替わるプラグイン。左下設置の矢印ボタンが、地味に便利、。

Curtain.js

[button_square color=”red” url=”http://curtain.victorcoulon.fr/”] デモページ [/button_square]

 

 

 

Parallax Content Slider w/ CSS3 and jQuery

パララックス効果に対応したスライドショー用プラグイン、Colissさんの記事で詳しく解説されています。

Parallax-Content-Slider-with-CSS3-and-jQuery

[button_square color=”red” url=”http://tympanus.net/Development/ParallaxContentSlider/”] デモページ [/button_square]

 

 

 

Parallax Slider

サムネイル付で、しかもパララックス効果にも対応した、フル機能のスライダー用プラグイン。

parallax_slider

[button_square color=”red” url=”http://tympanus.net/Tutorials/ParallaxSlider/”] デモページ [/button_square]

 

[参照元 : 14 Impressive parallax Scrolling Website Showcase Inspiration – favbulous]

Keywords /キーワード
Related /関連エントリー
. . .