Next WEB/HTML5
HTML5는 현재 여러 브라우저들에서 일부 적용이 되어 있습니다. 따라서 이를 이용한 여러 데모들이 많이 나오고 있는데 '와~~' 할만한 데모들도 꽤 있습니다. 물론 Flash를 이용하면 쉽게 가능한 내용들일지 모르겠지만 플러그인 이용없이 오로지 HTML5와 JS, CSS를 써서 개발했다고 생각한다면 "와~" 할만합니다.

HTML5 참고 문서: 2010/06/15 - [Next WEB/HTML5] - HTML5 내맘대로 초간단 정리

아래는 제가 찾아본 여러 Demo들입니다. 링크를 클릭하면서 직접 확인해보시길 바랍니다. HTML5를 통해서 이런것들이 가능합니다. ^^

l  HTML5Rocks

n  http://www.html5rocks.com/

l  HTML5Demo 

n  http://html5demos.com/ 

l  HTML5 Showcase 48 Potential Flash-KillingDemos 

n  http://www.hongkiat.com/blog/48-excellent-html5-demos/

l  15 Useful HTML5 Tutorials and CheatSheets 

n  http://webdesignledger.com/tutorials/15-useful-html5-tutorials-and-cheat-sheets? 

l  Apple Showcase 

n  http://www.apple.com/html5/

l  canvas 3D 

n  http://www.kevs3d.co.uk/dev/index.html

l  3D 테트리스예제 cubeOut 

n  http://alteredqualia.com/cubeout/


l  SkechPad 

n  http://mugtug.com/sketchpad/ 

l  Photo Editor 

n  http://mugtug.com/darkroom/ 

l  Dynamic Content Injection Demo 

n  http://people.mozilla.com/~prouget/demos/DynamicContentInjection/play.xhtml 

l  Mozilla : Dynamic Content InjectionDemo 

n  http://people.mozilla.com/~prouget/demos/DynamicContentInjection/play.xhtml? 

l  TweetDecks HTML5(video)

n  http://techcrunch.com/2010/05/19/tweetdecks-html5-browser/



canvas

l  http://www.robodesign.ro/coding/canvas-primer/20081208/example-rects.html

l  http://www.robodesign.ro/coding/canvas-primer/20081208/example-paths.html

l  http://www.robodesign.ro/coding/canvas-primer/20081208/example-drawimage.html

l  http://arapehlivanian.com/wp-content/uploads/2007/02/canvas.html

l  Interpolation Polynomial

n  http://www.benjoffe.com/code/demos/interpolate/

l  Canvascape - "3D Walker"

n  http://www.benjoffe.com/code/demos/canvascape/


Video 

l  Sublime Video Player

n  http://jilion.com/sublime/video

l  Click video to blow it up(webkit based browsers)

n http://www.craftymind.com/factory/html5video/CanvasVideo.html

l  Scripting your own HTML5 video controls

n  http://people.opera.com/patrickl/articles/introduction-html5-video/scripted-controls/

l  HTML5 Video with JavaScripted synchronisedcaptions

n  http://people.opera.com/brucel/demo/video/accessible-html5-video-captions.html

l  HTML5 video, with CSS transitions on hoverand focus

n  http://people.opera.com/brucel/demo/video/turkish-transition.html

l  video + canvas

n  http://people.opera.com/patrickl/articles/introduction-html5-video/video-canvas/

l  Mozilla : HTML5 Video Player Demo

n  http://people.mozilla.com/~prouget/demos/mashup/video.xhtml

l  Try out the Open Standard Media Player byMediaFront Demo

n  http://www.mediafront.org/project/osmplayer

WebGL
WebGL

l  Simple Demo

n  https://developer.mozilla.org/samples/webgl/sample1/index.html

l  Quake2

n  http://www.youtube.com/watch?v=fyfu4OwjUEI&feature=player_embedded#

n  http://code.google.com/p/quake2-gwt-port/


CSS3


l  Photo gallery1

n  http://demo.tutorialzine.com/2009/11/hovering-gallery-css3-jquery/demo.php 

l  Photo gallery2

n  http://people.opera.com/andreasb/temp_toshiba/stack/

l  An example showing the various kinds oftransition-timing-functions

n  http://people.opera.com/dstorey/transitions/transition-timing-example.html

l  CSS3 Transitions

n  http://people.opera.com/patrickl/experiments/css3/transitions/

l  Webfonts

n  http://devfiles.myopera.com/articles/751/newspaper.html

l  Webfonts and Text animation using SVG

n  http://devfiles.myopera.com/articles/751/junction-type-specimen-animated.svgz

l  CSS 3D Meninas

n  http://www.romancortes.com/blog/css-3d-meninas/

l  47 Amazing CSS3 Animation Demos

n  http://www.webdesignerwall.com/trends/47-amazing-css3-animation-demos/




저작자 표시 비영리 변경 금지
신고

'Next WEB > HTML5' 카테고리의 다른 글

HTML5 기반의 게임들  (0) 2010.10.09
구글 HTML5Rocks 슬라이드의 세미나(동영상)  (0) 2010.07.26
뜨거운 열기...HTML5 오픈 컨퍼런스  (0) 2010.07.05
HTML5 Demos  (3) 2010.06.25
HTML5 오픈 컨퍼런스 개최  (0) 2010.06.23
HTML5 내맘대로 초간단 정리  (0) 2010.06.15
3 0