Advertisement

Adoobe_Muse

 

最近の魅力的なWebデザイントレンドのひとつとして、パララックススクロールを利用したサイトデザインが人気です。

 

パララックスエフェクトは、複数のイメージ画像のスクロールするスピードを調整することで、奥行きのある立体的な空間を生み出す、アニメーションを得意としています。また、これまで3Dエフェクトに使われていたFlashに変わる、新しい表現アイデアでもあります。

 

 

海外デザインブログSplashnology.comで、パララックスエフェクトを使った、ユニークすぎるサイトをまとめたエントリー「Showcase of Webistes with Parallax Scrolling Effects」が公開されていたので、今回はご紹介します。

 

 

 

詳細は以下から。

 

 

 

ダイナミックな動きが素敵な、パララックスエフェクト利用サイトまとめ

 

Tillamook

チーズなどの乳製品を扱う会社のホームページで、かわいいイラストを使い、上手に企業コンセプトを伝えることができます。

A_Naturally_Aged_Story

 

 

 

The Great Forest Park Balloon Race

熱気球が空に舞い、そして着陸するまでを、コンテンツを紹介しながら魅せる、思わずスクロールしたくなるデザイン。

The_Great_Forest_Park_Balloon_Race

 

 

 

Pressels

スクロールすることで、商品デザインをアニメーションエフェクトを使い、プレゼンテーション形式で紹介しています。

PRESSELS

 

 

 

Gaumont T.S. Spivet

映画公式サイトのひとつで、折りたたみ式コンテンツや、スクロールするたびに変化するナビゲーションメニューなど、仕掛けがたくさん仕込まれています。

Gaumont

 

 

 

Deepsea Dive

縦に長いコンテンツを、海の中にたとえたユニークなコンセプトで、さまざまな海の生き物が、サイトを横切っていきます。

Interactive_Deepest_Dive

 

 

 

GCM Service Group

タイポグラフィーやアイコンなどが、スクロールに応じて、フェードアウトしたり、ズームアップされたりと、遊び心が満載。

GCM_Service

 

 

 

Cuisine Schmidt

コンテンツを切り替えるたびに、かわいいイラストデザインがアニメーション付きで出現します。

Cuisenes_Schmidt

 

 

 

Anthelios SPF Sunscreen

パララックスエフェクトは、商品紹介ページなどとの相性がとても良く、より分かりやすく、よりユーザーが興味をもつきっかけになりますね。

Anthelios

 

 

 

150 Jahre Geze

150年も続く会社の歴史をまとめており、途中からコンテンツが、水平方向に切り替わるなど、見やすさにもこだわったレイアウト。

150_JAHRE_GEZE

 

 

 

Trezee Studio

ヘッダーデザインに利用されている風船が、スクロールと共に、空に飛び立つエフェクトが素敵なサイト。

Trezee_studio

 

 

 

Ronik

宙を舞うクッキーが、スクロールするたびに変化し、特定のコンテンツのみにパララックスを採用することで、より印象的に。

Ronik

 

 

 

Make Your Money Matter

ひとつのトピックについて詳しくまとめた、インフォグラフィックデザインを、より動画っぽくインタラクティブに表現することができます。

Make_Your_Money

 

 

 

Karreprod

スクロールすることで、ぼんやりとWebサイト全体が浮かび上がってくる、エフェクトを採用したクールなWebサイト。

Karreprod

 

 

 

Lucas ‘NK’ Nikitczuk

各コンテンツをサークル状サムネイルでまとめ、ふわりとしたアニメーションでコンテンツが展開、スタイリッシュな配色が素敵です。

Lucas_NK

 

 

 

Hexagen

フランスにあるデザイン事務所で、各コンテンツごとに、背景デザインを変えており、特に配色にこだわりを魅せたサイト。

Hexagen

 

 

 

Haunted Hills

パララックスエフェクトを使うことで、イラストデザインに奥行き感を表現することができるのも特長です。

Hauted_Hills

 

 

 

Herbal Bises

たくさんの蝶々が、ひらひらと舞っている様子を表現した、デザインが素敵なサイト。

Herbal_Bises

 

 

 

Guts & Glory:

巨大なイラストイメージを、スクロールすることを前提に配置することで、静止画イメージをより魅力的に演出します。

Guts_and_Glory

 

 

 

GetResponse 15th Birthday

会社設立15周年を記念した特設サイトで、各コンテンツがダイナミックに切り替わり、イラストとイメージ写真を多彩に活用。

GetResponse_15th_Birthday

 

 

 

Fresh Bar

さまざまなデザインパーツが、画面全体に飛び散るエフェクトがユニークな、飲料ドリンクのサイトデザイン。

Fresh_Bar

 

 

 

Axel Aubert

デジタルコラージュアート画に、パララックスエフェクトを追加することで、奥行き感だけでなく、サイト全体のイメージを見事に変えています。

Axel_Aubert

 

 

 

パララックスエフェクトを使った参考チュートリアルまとめ

 

実際にパララックスエフェクトの具体的使い方を、デモページとサンプルファイルと一緒にまとめています。今後のWebデザイン制作に活用してみてはいかがでしょう。

 

jQueryを使ったパララックスエフェクトの作り方

parallax-tut

[button_square color=”purple” url=”http://imgs.abduzeedo.com/files/tutorials/Easy_Parallax_Effect_with_jQuery/demo.html”] デモページ [/button_square]  [button_square color=”red” url=”http://abduzeedo.com/super-easy-parallax-effect-jquery”] ダウンロードページ [/button_square]

 

 

Jarallax.jsを使ってパララックスエフェクトを作成する方法

final-result

[button_square color=”purple” url=”http://www.onextrapixel.com/examples/parallax-scrolling-website-with-jaralla/”] デモページ [/button_square]  [button_square color=”red” url=”www.onextrapixel.com/examples/parallax-scrolling-website-with-jaralla/parallax-scrolling-website-with-jaralla.zip”] ダウンロードページ [/button_square]

 

 

Skrollr.jsを使ってパララックスエフェクトを作成するチュートリアル

contentparallaax

[button_square color=”purple” url=”http://www.onextrapixel.com/examples/parallax-scrolling-website-with-jaralla/”] デモページ [/button_square]  [button_square color=”red” url=”www.onextrapixel.com/examples/parallax-scrolling-website-with-jaralla/parallax-scrolling-website-with-jaralla.zip”] ダウンロードページ [/button_square]

 

 

ダイナミックなパララックスエフェクトを作成する方法

Parallax-Scrolling-Tutorial

[button_square color=”purple” url=”http://richardshepherd.com/smashing/parallax/”] デモページ [/button_square]  [button_square color=”red” url=”https://github.com/richardshepherd/Parallax-Scrolling”] ダウンロードページ [/button_square]

 

 

ジャイロスコープ対応のパララックスエフェクト用スクリプト

スマートフォンやタブレットを傾きに反応する、ジャイロスコープに対応している、ユニークなJSスクリプト。

parallaxjs

[button_square color=”purple” url=”http://wagerfield.github.io/parallax/”] デモページ [/button_square]  [button_square color=”red” url=”https://github.com/wagerfield/parallax/archive/master.zip”] ダウンロードページ [/button_square]

 

 

OnePageScroll.jsを使ってiPhone 5Sサイトを再現するチュートリアル

onepagescroll-cover-photo

[button_square color=”purple” url=”http://www.onextrapixel.com/examples/apple-iphone5s-website-one-page-scroll/”] デモページ [/button_square]  [button_square color=”red” url=”http://www.onextrapixel.com/2013/09/18/onepagescroll-js-creating-an-apples-iphone-5s-website/”] ダウンロードページ [/button_square]

 

 

参照元リンク : Showcase of Websites with Parallax Scrolling Effects – Splashnology.com