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

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

国内サイト

電通

http://dentsunetwork.com/#/history

NIKE

http://www.nikebetterworld.com/

canon

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

星野リゾート・界

http://kai-ryokan.jp/

DURAS　AMBIENT

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

博報堂

http://www.hakuhodody-inter.co.jp/

POINT

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

海外サイト

one design company

http://onedesigncompany.com/

ap-o

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

netlash-bseen

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

stijl royal

http://stijlroyal.com/#spektrum

digitalhands

http://www.digitalhands.net/

yebo creative

http://www.yebocreative.com/

trouwamsterdam

http://www.trouwamsterdam.nl/en/

edits quarterly

http://editsquarterly.com/

beautiful explore

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

360langstrasse

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

manufacturedessai

http://www.manufacturedessai.it/it/

smart USA

http://www.smartusa.com/

Ben The Body Guard

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

Mario Kart Wii

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

Smokey Bones

http://www.smokeybones.com/

New Zealand

http://www.newzealand.com/jp/

TED Portland

http://www.newzealand.com/jp/

ASTURIANA

http://www.lagentehadichosi.es/

culturalsolutions

http://www.culturalsolutions.co.uk/

GuyVernes

http://www.guyvernes.com/

Yess BMX

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

freestyle night

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

Moodsofnorway

http://www.moodsofnorway.com/

campaign monitor

http://www.campaignmonitor.com/hiring/

Row To The Pole

http://www.rowtothepole.com/

ka_len_diar2012

http://kalendiar.lenm.cz/

UNFOLD

http://unfold.no/

siebennull

http://www.siebennull.com/

head2heart

http://www.head2heart.us/

nizo

http://nizoapp.com/

Volkswagen Beetle

http://beetle.de/