howtoparallax_top

 

 

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

 

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

 

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

 

 

 

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

 

 

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

 

 

 

詳細は以下から。

 

 

 

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

 

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

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

 

 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サイトまとめています。

 

 

パララックス効果に関連する記事まとめ

 

 

 

 

 

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

 

jQuery Scroll Path

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

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

scrollpath

デモページ

 

 

 

jQuery Scrolldeck parallax Plugin 

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

parallax

デモページ

 

 

 

Sequence

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

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

デモページ

 

 

 

Stellar.js

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

stellar

デモページ

 

 

 

Scrollorama

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

scrollorama

デモページ

 

 

 

Curtain.js

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

Curtain.js

デモページ

 

 

 

Parallax Content Slider w/ CSS3 and jQuery

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

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

デモページ

 

 

 

Parallax Slider

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

parallax_slider

デモページ

 

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

Bookmark, Maybe??この記事のブックマークはこちらからどうぞ。