HTML5 Showcase: 48 Potential Flash-Killing Demos |
HTML5 Showcase: 48 Potential Flash-Killing Demos Posted: 07 Jun 2010 08:39 AM PDT So you’ve heard all rumors about HTML5 would take over Adobe Flash. While most web community argues that it’s possible or not, you must be wandering what makes HTML5 so powerful that even giant company Apple wants to use it to replace Flash. That’s why this post exists, we’re not going to talk about what HTML5 can do, but show live demos of magical things that HTML5 can achieve with other language like JavaScript, so get ready to be inspired. Note: As HTML5 is not fully supported by certain web browser like Internet Explorer, you’re strongly recommended to use Firefox browser to view all HTML5 demos below.
AnimationThe HTML5’s canvas element is the deciding factor for HTML5 to replace certain Flash animation. It allows you to build dynamic, scriptable rendering of 2D shapes and bitmap images with Javascript, which by other mean is, controllable animation. Audioburst AnimationA comfortable and fantastic animation created with HTML5’s canvas and audio tag. Ball PoolBeing showcased in the last Google I/O event, this demo shows you how dynamic can HTML5 be. Blob SalladA HTML5-spawned creature that would please you. BomomoWith Bomomo, you can observe different atomic movement simulated with HTML5. Browser BallGet amazed with this ‘cross-browser’ HTML5 ball. BubblesHave fun by create endless floating bubbles with different color. Canvas Cartoon AnimationA simple and funny HTML5 cartoon that helps you to understand what HTML5’s canvas element can do. CoolclockA nice, customizable analog clock built by HTML5 and JavaScript. Flickr PS3 SlideshowView your Flickr’s photos with PS3 style slideshow in the web browser. Interactive PolaroidAn interactive demo that works pretty similar to multi touch interface. JS FireworksEnjoy the fireworks moment with your preferred gravity and speed, powered by HTML5 and Javascript. KaleidoscopeA very beatiful and futuristic HTML5 kaleidoscope. Liquid ParticlesSensitive particle animation that reacts based upon your mouse movement. MesmerizerAnother sensitive and outstanding HTML5 demo that shows how nearby elements react with you mouse movement. Nebula CloudGet lost with this wondrous HTML5 nebula. ParallaxView all 2D shapes in parallel perspective. Particle AnimationAn elegant HTML5 particle animation that can form into your preferred message. SpreadGet lost with this endless spread animation. StarfieldA very cool HTML5 starfield animation that would change direction and speed based on your mouse movement. Video DestructionOne click to boom a playing video. WaveformObserve how HTML5’s canvas wave moves by altering its amplitude, wavelength, width, etc. 3D EffectImpressed by canvas animation? That’s more HTML5’s canvas element can do, and it’s called 3D effect. Developer can rely on canvas element, DOM and JavaScript to create 3D effect, which can later be developed into 3D animation or game. Canvas3D and FlickrHave a whole new 3D experience with Flickr’s photostream. Cloth SimulationA realistic, HTML5-based cloth simulation. Evolving MonsterObserve a monster evolving into a complicated creature, one of its creator is HTML5. Google GiftboxGiant search engine Google is presented in 3D, playable view. JS TouchA high quality and realistic ‘3D on 2D Canvas’ showcase. Data PresentationWhile HTML5’s canvas element can be used to create animation and 3D effect, it can also be implemented to present mathematical data. GnuplotGnuplot, a data plotting application in HTML5 version. RGraphRGraph provides a wide range of data presentation like bar chart, progress bar and traditional radar chart. Web ApplicationUltimately, using all possibilities combined by HTML5 and other langauge, one can create interactive application or game that’s close to Flash application. CanvasPaintWitness the brother of Microsoft Paint comes into your web browser, and his father is HTML5. CanvasMolA scientific application which is built to help you to understand certain earth element’s structure. Cartoon BuilderDraw interesting cartoon image with this minimal and interactive cartoon builder. Drag Anything HereDrag anything you can drag in the demo to show details. Gartic SketchAn original HTML5 application that allows you to make some basic drawings that can be saved into different image format like jpeg or png. PhysicSketchDraw whatever you like and see how they react with simulated gravity. SketchpadA powerful HTML5 drawing application that enables you to draw and edit your image in the precise manner. SmalltalkA web application that confirms geographical position of weather-related message acquired from Twitter, thus forming them into a canvas-based ’social weather’ map, quite trivial (as stated by author) but interesting. Game3BoredYou would never get bored if you can keep evading hundreds of HTML5 bullets in next second. BreakoutRebound the ball to break all bricks. CanvascapeNot quite a game, but it demonstrates how HTML5 can be used to develop First Person Shooting browser game. Catch ItHow many balls can you dodge to get your winning HTML5 square? Chain ReactionChain the explosion to achieve the goal, don’t get addicted. CubeoutPlay Tetris in 3D, top-down view. etchaPhysicsDraw item to move the ball to the star, don’t forget about the gravity. Jigsaw PuzzleClick, rotate and drop puzzle pieces to solve this HTML5-based jigsaw puzzle. Slide PuzzleSlide to the victory, another HTML5 game that’s built to squeeze your mind juice. Same GameRemove certain group to get another group paired in same color and you would eventually be awarded a victory. TetrisOne of the most classic game brought back to life by HTML5. TorusYet another Tetris game in pseudo-3D version. ConclusionWhat is the limitation of HTML5? At this point we cannot decide, but with the impressive video below we can know how far the HTML5 has been pushed:
Yes, it’s Quake II in web browser, so now it’s very clear that with HTML5, more groundbreaking web application would be born to serve billions of internet users. It’s fast, it’s evolving, and it’s changing the world wide web. The question is, how would you use this game-changing HTML5? We do like to hear your idea! |
You are subscribed to email updates from hongkiat.com To stop receiving these emails, you may unsubscribe now. | Email delivery powered by Google |
Google Inc., 20 West Kinzie, Chicago IL USA 60610 |
0 comments:
Post a Comment