HTML5 Demos

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  TweetDeck’s 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/