最近話題のパララックス効果を利用したアニメーションとデザインのキレイな国内・海外サイトまとめました

パララックス効果とは・・

スクロール時に平面で重なり合う画像を異なる速さで上下や左右に動かすことで奥行きがあるように見せる視差効果を「パララックス効果」と呼びます。css3やjavascriptで実装されているものが多く、このパララックス効果をうまく取り入れることでちょっとユニークなアニメーションを表現できます。このパララックス効果を上手く利用したWEBサイトを国内・海外ともにまとめて紹介します。

国内サイト

電通

電通http://dentsunetwork.com/#/history

NIKE

NIKEhttp://www.nikebetterworld.com/

canon

cannonhttp://web.canon.jp/about/ad/laman/content.html

星野リゾート・界

界http://kai-ryokan.jp/

DURAS AMBIENT

DURASAMBIENThttp://www.duras-ambient.com/#collection

博報堂

博報堂http://www.hakuhodody-inter.co.jp/

POINT

POINThttp://www.point.jp/index.html

海外サイト

one design company

onedesigncompanyhttp://onedesigncompany.com/

ap-o

ap-ohttp://www.ap-o.com/

netlash-bseen

http://www.netlash-bseen.be/

stijl royal

stijlroyalhttp://stijlroyal.com/#spektrum

digitalhands

digitalhandshttp://www.digitalhands.net/

yebo creative

yebocreativehttp://www.yebocreative.com/

trouwamsterdam

trouwamsterdamhttp://www.trouwamsterdam.nl/en/

edits quarterly

editsquarterlyhttp://editsquarterly.com/

beautiful explore

beautifulexplorehttp://www.beautifulexplorer.com/main.html

360langstrasse

360langstrassehttp://www.360langstrasse.sf.tv/page/

manufacturedessai

manufacturedessaihttp://www.manufacturedessai.it/it/

smart USA

smart_usahttp://www.smartusa.com/

Ben The Body Guard

Ben_The_Body_Guardhttp://benthebodyguard.com/index.php#utmxpreview=0

Mario Kart Wii

Mariohttp://www.nintendo.com.au/gamesites/mariokartwii/

Smokey Bones

SmokeyBoneshttp://www.smokeybones.com/

New Zealand

New_Zealandhttp://www.newzealand.com/jp/

TED Portland

TEDPortlandhttp://www.newzealand.com/jp/

ASTURIANA

ASTURIANAhttp://www.lagentehadichosi.es/

culturalsolutions

culturalsolutionshttp://www.culturalsolutions.co.uk/

GuyVernes

guyverneshttp://www.guyvernes.com/

Yess BMX

YessBMXhttp://yessbmx.com/#buy-the-frame

freestyle night

freestyle_nighthttp://www.freestyle-night.ch/

Moodsofnorway

Moodsofnorwayhttp://www.moodsofnorway.com/

campaign monitor

campaignmonitorhttp://www.campaignmonitor.com/hiring/

Row To The Pole

Row_To_The_Polehttp://www.rowtothepole.com/

ka_len_diar2012

ka_len_diar2012http://kalendiar.lenm.cz/

UNFOLD

UNFOLDhttp://unfold.no/

siebennull

siebennullhttp://www.siebennull.com/

head2heart

head2hearthttp://www.head2heart.us/

nizo

nizohttp://nizoapp.com/

Volkswagen Beetle

beetlehttp://beetle.de/

この記事を書いた人

著者 : ハヤシユタカ

2001年、有限会社ムーニーワークスを設立。WEB制作の他、書籍執筆、セミナー講演、企業研修などを行う。また、クリエイター育成機関デジタルハリウッドでは1999年より講師として本科WEBデザイナーコースやデジタルデザインコースを担当。 詳しいプロフィールはこちら

最近書いた記事

この記事に関連する記事