벤치마킹중... 너무 url을 늘어놔서 그렇지만, 링크 하나하나 소중한 정보들을 담고있다.
싱글 페이지 반응형 웹은 얼마 전 간단하게나마 정말 재미있게 만들어봤고,
패럴랙스 스크롤링 웹도 올해가 가기 전에 개인프로젝트로 만들어보고싶은 목표가 있다.
패럴랙스 스크롤링은 갑자기 생겨난 말은 아니고, 1940년으로 거슬러 올라간다.
(참고 http://story.pxd.co.kr/595) 웹 역시 다시 주목받기 훨씬 이전부터 플래시로 만들어지곤 했다.
난 웹 디자이너로 일해온게 아닌데다 플래시엔 그닥 관심이 없었다..
모션 자체엔 관심이 많았지만... 플래시는 정말 3Ds max만큼이나 손이 가지 않는 툴이었다.;;;
근데 모바일과 태블릿의 영향인지 html5와 jQuery에는 엄청 관심이 간다. 희안하게...
겜으로 창업했으니 오지랖을 넓혀보자면 패럴랙스 스크롤을 활용한 웹 게임 만드는것도 가능하겠지..
이러나 저러나 말로는 누가 못할꼬..^-^;; 실천을 해야 말이지...ㅋㅋㅋㅋ
해외
http://www.culturalsolutions.co.uk/
http://everylastdrop.co.uk/
http://titanic.q-music.be/
http://www.iutopi.com/
http://www.farmhousefare.co.uk/
http://cheesepleasegame.com/
http://smokeybones.com/
http://www.nintendo.com.au/gamesites/mariokartwii/#competition
http://grabandgo.pt/grab.html
http://www.putzengel.at/#moveto_contact
http://www.ok-studios.de/home/
http://benthebodyguard.com/index.php
http://www.egopop.net/
http://www.thebeatlesrockband.com/
http://www.sullivannyc.com/
http://www.itosieceni.pl/
http://www.nike.com/jumpman23/aj2012/
http://unfold.no/
http://www.dentsunetwork.com/#/history
http://www.resolutionim.com/speed
http://www.janploch.de/
http://www.kryptis.com/#about
http://annasafroncik.it/
http://www.unfinishedbusiness.is/
http://lostworldsfairs.com/atlantis/
http://www.johanreinhold.com/
http://www.bagigia.com/
http://activatedrinks.com/#/products
http://www.intacto10years.com/index_start.php
http://www.soleilnoir.net/believein/
http://www.thesearethings.com/
국내
http://www.tistory.com/event/photoevent2013/
http://bns.plaync.com/intro/main
http://www.cresyn.com/main.php
http://pyl.hyundai.com/
http://www.lgoled.tv/
튜토리얼,소스...
http://speckyboy.com/2012/07/20/the-parallax-scrolling-effect-40-examples-and-tutorials/
http://www.topdesignmag.com/20-examples-of-one-page-websites-that-are-using-parallax-scrolling/
http://www.creativebloq.com/web-design/parallax-scrolling-1131762
http://webdesignledger.com/inspiration/21-examples-of-parallax-scrolling-in-web-design
http://richardshepherd.com/smashing/parallax/
http://designwoop.com/2012/06/parallax-scrolling-tutorials-resources/
http://net.tutsplus.com/tutorials/html-css-techniques/simple-parallax-scrolling-technique/
http://www.designzzz.com/jquery-parallax-plugins/
http://www.impressivewebs.com/parallax-scrolling-scripts-plugins/
http://jalxob.com/cool-kitten/
http://blog.themeforest.net/tutorials/create-a-funky-parallax-background-effect-using-jquery/
* 반응형 웹 디자인을 제작하기 위한 미디어쿼리 해상도 분기점 리스트
(resolution break point)
320픽셀 :휴대폰과 같은 소형 스크린 기기에서 portrait 모드일 때
480픽셀 :휴대폰과 같은 소형 스크린 기기에서 landscape 모드일 때
600픽셀 :킨들(600x800), 반스앤노블(600x1024) 소형 태블릿에서 portrait 모드일 때
768픽셀 :아이패드(768x1024)와 같은 10인치 태블릿에서 portrait 모드일 때
1024픽셀 :아이패드(768x1024)와 같은 태블릿에서 landscape 모드일때, 특정 노트북,데스크톱
1200픽셀:와이드 스크린 디스플레이, 주요 노트북, 데스크톱의 브라우저일 때