1. Ball Pool
Start by shaking the browser, then create new balls (click on empty space), move some others (drag) and reset the screen (double click). Yes, then it is like the old days once again! :) This amazing ball pool was actually designed to showcase Google Chrome's performance. A super simple collision system in between the circles was developed and was mixed with the browser movement. With the physics of inspired by Google gravitiy integrated to it, the Ball Pool was up and running in full swing.
2. Liquid Particles with HTML5
These colorful liquid particles powered by HTML5, hideously follow your cursor movement and light up the whole screen with fascinating colors. These are juts like the particles trapped in a wormhole discoball. Play around with your cursor and come up with amazing color patterns on the screen. They are really tough to control and take up some time and practice to gain control. Amidst the various HTML5 animations this one developed by Daniel Puhe truly stands out!
3. HTML5 Love Dots Audio Burst Animation
An amazing animation crafted with HTML5 connects the dots of love for HTML5. Synced with audio, the dots bubble out and flood the screen in a wonderfully random manner. What started out as a little weekend experiment radically changed the way everyone perceived HTML5. The concept was originally a performance study how many particles a browser can calculate and display with a decent frame rate. Soon was music added music and a social element displaying tweets from twitter that contain the words love + html5. The experiment was a huge success and got some nice accolades from Google chrome experiments and Hackernews.
4. HTML5 3D Destructive Video
An amazing effect created using HTML5, this animation effect allows one to destroy a video and blow it up with every single click on the video. The video blows up into the space and adding to all the joy of animation is the 3D video used in the demo for the added effect. One feature that could have been added was adding depth to the explosion, so pieces that are closest to ground zero fly up into the air as they sail outward. With full shadow effects this could look really cool. The whole idea is based on the Canvas.drawImage() api call. The api lets you take the contents of specific HTML elements and draw them into a canvas, and the 3rd element in that list is just begging to be abused. Copying video into a canvas element means opening up the ability to manipulate or process video frames at runtime!
5. HTML5 Blob Sallad
HTML5 has got too cute. These cute pink blobs powered by HTML5 are sure to please and entertain. Play, drag, rotate and have all fun that you want to have with these Blobs. Named as "Blob Sallad" this HTML5 rendition is simple fun. Move the blobs around with arrows, split up blobs to create new ones, join existing blobs together and even play with their gravity! Interesting collision detection mechanics and bouncy feature keep this Blob Sallad simple yet intriguing.
6. Spread With HTML5
Spread is an interesting HTML5 experiment by Tom Theisen. Spread was developed to test the boundaries and capabilities of HTML5. Generate amazing spirals and spread them around randomly and rapidly with this HTML5 rendition. One can easily customize spread with the attributes like frame rate, cycle colors, fade option, randomized position and wrap edge. Spread is much more than just HTML5, it is colors, spirals and randomness!
7. HTML5 JS Fireworks
Light up the night sky with the fireworks in words of your choice with HTML5 powered JS Fireworks. Developed by Kenneth Kufluk, JS Fireworks is a Chrome Experiment, amongst other things! It's published out to Google AppEngine (free!), which is what the app.yaml and index.yaml files are. The default version presented is the HTML5 Canvas experiment. There are also written versions for Flash, Flex and SVG. Some of them are more complete than others!
8. CoolClock - The Javascript HTML5 Analog Clock
CoolClock is a customisable javascript analog clock. Using CoolClock is just simple. Download coolclock.js, moreskins.js and excanvas.js and put them in the same folder as your html file. Now there are two approaches to enabling your clocks, depending on whether your page uses jQuery. If your page uses jQuery and jQuery is loaded before coolclock.js is loaded, then you don't have to do anything more. If your page doesn't use jQuery then you need to add onload="CoolClock.findAndCreateClocks()" to your body tag, (or the equivalent in your preferred javascript framework). Powered with the features of HTML5, CoolClock will be a great addition to every cool website!
9. HTML5 Bubbles - Interactive Canvas
Bubbles is an interactive HTML5 canvas animation. Colorful, zippy bubbles powered by HTML5 is just fun. Bubble up, spread the bubbles, choose their colors and multiply the bubble count. There are several color customization options provided while we add a new bubble. Using the bubble canvas is imple, just click on the canvas to add more blobs. The colored buttons set the blob color. RND sets random color. This works in Firefox, Safari, Chrome, iPhone, and IE9 browsers.
10. HTML5 Kaleidoscope
Kaleidoscope is a very beautiful rendition by Christophe Résigné using FlashCanvas. FlashCanvas is a JavaScript library which adds the HTML5 Canvas support to Internet Explorer. It renders shapes and images via Flash drawing API. It supports almost all Canvas APIs and, in many cases, runs faster than other similar libraries which use VML or Silverlight. Kaleidoscope is a very attractive HTML5 animation developed with this framework!
0 comments:
Post a Comment