HTML5 Showcase: 48 Potential Flash-Killing Demos
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.
Animation
The 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 Animation
A comfortable and fantastic animation created with HTML5′s canvas and audio tag.
Ball Pool
Being showcased in the last Google I/O event, this demo shows you how dynamic can HTML5 be.
Blob Sallad
A HTML5-spawned creature that would please you.
Bomomo
With Bomomo, you can observe different atomic movement simulated with HTML5.
Browser Ball
Get amazed with this ‘cross-browser’ HTML5 ball.
Bubbles
Have fun by create endless floating bubbles with different color.
Canvas Cartoon Animation
A simple and funny HTML5 cartoon that helps you to understand what HTML5′s canvas element can do.
Coolclock
A nice, customizable analog clock built by HTML5 and JavaScript.
Flickr PS3 Slideshow
View your Flickr’s photos with PS3 style slideshow in the web browser.
Interactive Polaroid
An interactive demo that works pretty similar to multi touch interface.
JS Fireworks
Enjoy the fireworks moment with your preferred gravity and speed, powered by HTML5 and Javascript.
Kaleidoscope
A very beatiful and futuristic HTML5 kaleidoscope.
Liquid Particles
Sensitive particle animation that reacts based upon your mouse movement.
Mesmerizer
Another sensitive and outstanding HTML5 demo that shows how nearby elements react with you mouse movement.
Nebula Cloud
Get lost with this wondrous HTML5 nebula.
Parallax
View all 2D shapes in parallel perspective.
Particle Animation
An elegant HTML5 particle animation that can form into your preferred message.
Spread
Get lost with this endless spread animation.
Starfield
A very cool HTML5 starfield animation that would change direction and speed based on your mouse movement.
Video Destruction
One click to boom a playing video.
Waveform
Observe how HTML5′s canvas wave moves by altering its amplitude, wavelength, width, etc.
3D Effect
Impressed 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 Flickr
Have a whole new 3D experience with Flickr’s photostream.
Cloth Simulation
A realistic, HTML5-based cloth simulation.
Evolving Monster
Observe a monster evolving into a complicated creature, one of its creator is HTML5.
Google Giftbox
Giant search engine Google is presented in 3D, playable view.
JS Touch
A high quality and realistic ’3D on 2D Canvas’ showcase.
Data Presentation
While HTML5′s canvas element can be used to create animation and 3D effect, it can also be implemented to present mathematical data.
Gnuplot
Gnuplot, a data plotting application in HTML5 version.
RGraph
RGraph provides a wide range of data presentation like bar chart, progress bar and traditional radar chart.
Web Application
Ultimately, using all possibilities combined by HTML5 and other langauge, one can create interactive application or game that’s close to Flash application.
CanvasPaint
Witness the brother of Microsoft Paint comes into your web browser, and his father is HTML5.
CanvasMol
A scientific application which is built to help you to understand certain earth element’s structure.
Cartoon Builder
Draw interesting cartoon image with this minimal and interactive cartoon builder.
Drag Anything Here
Drag anything you can drag in the demo to show details.
Gartic Sketch
An original HTML5 application that allows you to make some basic drawings that can be saved into different image format like jpeg or png.
PhysicSketch
Draw whatever you like and see how they react with simulated gravity.
Sketchpad
A powerful HTML5 drawing application that enables you to draw and edit your image in the precise manner.
Smalltalk
A 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.
Game
3Bored
You would never get bored if you can keep evading hundreds of HTML5 bullets in next second.
Breakout
Rebound the ball to break all bricks.
Canvascape
Not quite a game, but it demonstrates how HTML5 can be used to develop First Person Shooting browser game.
Catch It
How many balls can you dodge to get your winning HTML5 square?
Chain Reaction
Chain the explosion to achieve the goal, don’t get addicted.
Cubeout
Play Tetris in 3D, top-down view.
etchaPhysics
Draw item to move the ball to the star, don’t forget about the gravity.
Jigsaw Puzzle
Click, rotate and drop puzzle pieces to solve this HTML5-based jigsaw puzzle.
Slide Puzzle
Slide to the victory, another HTML5 game that’s built to squeeze your mind juice.
Same Game
Remove certain group to get another group paired in same color and you would eventually be awarded a victory.
Tetris
One of the most classic game brought back to life by HTML5.
Torus
Yet another Tetris game in pseudo-3D version.
Conclusion
What 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!
Author: Alvaris Falcon
Alvaris is a web designer and developer who currently works on Theme Craft. He also consider himself a charity runner and blogger in Holy Aviary.
Share!
Enjoy the article so far? Recommend it to your friends and peers.
Subscribe! (free)
Be the first to our articles and get latest updates on freebies.
Advertisement
“… HTML5 so powerful that even giant company Apple wants to use it to replace Flash.” I stopped right there. There is nothing about Apple thinking that HTML5 is better than Flash. They only block Flash on their phones and tablets to FORCE you to buy apps from AppStore so they can make money. It has been proven with this release of Android and Flash 10.1.
Oh, and all those demos have slow framerate, cannot be viewed in all browsers and only show what Flash has since, well, 2006? You call that cool, top-noch things?
Well, I’m sure you know all that but well, buzz topics are always cool right?
Interesting… so few people see the truth in Apple’s move.
It’s ok they choose their marketing strategy, even cutting out their users from all rich content in flash. What is wrong, is the misinformation and lies. I think Apple should be more respectful of Adobe.
Remember the years Apple was going out of business? (whoever of you is in IT since the 80s like I do knows) The only thing that kept Apple alive was Quark Xpress and Adobe software. Without those, Mac would be dead 10 years ago.
Even in such an aggressive capitalistic culture as the american one, I never heard before of a company openly insulting a partner, just like Jobs did with Adobe. Whatever Jobs had in mind, it sounded so unbalanced and cheap…
Apple should respect Adobe. Choose your marketing strategy, but do not lie, and do not insult partners.
Lovely but not really impressive, flash still is the best tool for animation to the web.
A Nooby will do much better and a lot faster with the flash professional tools
I can imagine the hours spent with JavaScript to produce a simple animation.
I will be more enthusiastic with html5 when a robust designer friendly tool is available to animate the graphics. ( Provably apple has something in the sleeve )
I love canvas object, but its still ages far from flash capabilities.
I wonder why so many people post pages of these useless demos calling them “flash killers”. What is so wrong about flash?
It seems like there is an underlying layer of envy, or anger, toward flash developers…
I think that diversity is richness, but how can these cute demos kill a robust RIA development tool such as flash?
And why, oh please, tell me why, any collection of cute html 5 demos has to be accompanied by the “flash killer” sentence?
Alvaris Falcon, how well you know yourself? Can you please tells me what moves you inside? Where is the source of this hatred against flash?
I personally decided to concentrate solely on actionscript more than 10 years ago, because I didnt want to waste my precious life time on top of browser compatibility and weird unexpected bugs on each browser update. I am sorry about JS developers and CSS gurus who spend their time on it, but of course there must be some kind of passion in it.
I have developed all sort of incredibly complex flash application, things that believe me, could never be achieved in html5 even if it was 100% compatible and implemented in all browsers.
There is no doubt that html5 is wonderful, and canvas object is amazing. I love them and I am using them, but please speak to a flash guru before asserting things based on prejudice and emotional bias.
Alvaris, how well you know flash? Howmany years of experience you have in RIA development in AS? What gives you the certainty and confidence to raise such a blunt statement?
I always feel that I have something new to learn, every day, and I am cautios not to shoot judgements, even about things I know very, very well.
Probably Alvaris still has a lot of meditation and shrink sessions to go through before learning that wisdom and strength relies in humbleness.
I am happy though that html5 will lead to substitute flash in things where its totally useless, such as banners, advertisements, and useless demos as the ones in this page.
I am looking forward to see or to build a robust application in canvas.
love
Filippo
Hi Filipino,
I love canvas object too, and I know it’s still ages far from Flash capabilities.
To be honest, I wasn’t the one who named this article’s topic, my original topic is ’48 Live Examples of HTML5′. I didn’t change it back because I respect my editor’s decision, as he knows what’s the best for Hongkiat. Thanks to him, I was fully allowed to produce a showcase article of HTML5 without any intentional bias.
I personally didn’t hate Flash, seriously. My brother is a Flash developer and he has told to me about his dream on Flash application, it’s like a father talking about his future son, so there’s no possibility for me to be angry or envy about Flash.
I wrote this article with the direction that I don’t want to touch the war between Flash and HTML5 (that’s why there’s only 4 “Flash” word in this lengthy showcase), so you can see except the title, I didn’t mentioned in any way there I think Flash would kill HTML5. In fact, I even declined to finish the article ‘Flash vs HTML5′ due to my opinion that Flash and HTML5 can both survive in the web with their strength.
I think years of experience cannot be a measurement for one’s understanding on a knowledge (just like I spent 15 years on my English but it still sucks :P) but from the day I know Flash I do think it has capabilities to do professional application, and I witnessed this through these years.
I agree with you that I’m still young, and has a lot of meditation and shrink sessions to go through before learning that wisdom and strength relies in humbleness, I apologize to you that if my article makes you a bad day, sorry. :-)
Peace,
Alvaris
I’m sorry, it’s ‘Filippo’. :-)
I’ve been on-and-off working on a javascript port of the sliding block game Klotski, it’s not using any html5 features right now (just a lot of CSS3 and DOM / JS) but I plan on implementing some html5 features for it soon (local storage scoreboards, etc)
Anyway it’s sorta fun, if you were interested in checking it out : http://mediaupstream.com/sandbox/klotski/
hmm
very good my man shape
Awesome list up!
that awesome,…. no wonder why apple want to replace Flash with HTML5.
html 5 help me so much, it makes me easier to do something
If you used a MAC, you would understand what Steve Jobs means. I agree that they market aggressively, but another truth is that Flash works crappy on MAC, CPU runs like crazy and battery life becomes the half of normal. Ah, and it crashes too often under MAC.
Flash was very poor in its initial versions too grew. HTML5 will most likely grow much faster.
I really liked your site , I love news like this site that people voted on the team of people to choose the greatest team twitter and compete for prizes http://www.twitorcida.com.br
The list of what HTML 5.0 can do is impressive. But, till application developers can come up with a Drag and Drop applications as easy to use as Flash to design HTML5 Objects and Shapes and also a tool which makes it as easy to write codes that can integrate with the HTML Object itself, my leaning is would still be towards Flash.
That was very impressive! I never thought HTML could go this far! I appreciate Alvaris Falcon effort for putting all this cool stuff at one place.
Are you kidding me? can HTML 5 create this: http://www.2advanced.com – Not a chance. You are basically saying you are content going back to using paint, horrible graphics and mediocre animation – which every single one of those examples display. It’s as if they just discovered animation.
Take creative thinking and any possible concept which can be brought to life easily with Flash and resort to antique capabilities and BS coding? Missing the boat again with how far back HTML5 really is! and for what? Better question – for Who? Apple. Unbelievably a joke.
I can make any thing fly, drag, rotate, expand, fade and compute – on any type of canvas I can dream up – that can be displayed on ANY browser with Flash. Oh sorry – accept for your nifty touch-screen Apple devices because you think they are cute.
What developers really need is someone who is educated and understands that everything is already possible with Flash. Why the heck would I want my website to look like some antique animated garbage from 5-8 years ago.
This isn’t cool man, these are crap animations and crap display.
And then some moron will respond that flash is a video player again.
Don’t drink the Apple-flavored punch!
Cool? You have got to be joking me.
Sincerely,
A Fact.
Good stuff, but Flash STILL eats this up and spits it out.
The HTML5 spec is still years away and is only supported my the tip of the iceberg modern browsers. Its great that people are experimenting with developing technologys but stating they will “kill” Flash is quite moronic.
Seriously…
Yay lets all jump back in time 10 years to crappy graphics and hacky, unsupported concepts which will NEVER work in Internet Exploder.
Congratulations on screaming “cult” in a church, Flash is far FAR superior to this filth…
None.
HTML5 isnt a standard, and wont be for another 10 years (W3c mentions this as fact!) Not to mention all of these examples look terrible when placed next to flash!
What? An experience of terrible, unfinished and average animations and basic interactivity. HTML Fails!
Yes but how were these created? There is no, as far as I know, authoring tool for HTML5. You can’t expect artists to become coders. we feel more comfortable with a GUI app. Just like a programmer can’t draw. Two completely different brain hemisphears.