HTML5 has been moving forward to replace Flash as the framework of choice for web animation, and why not? HTML5 can handle a variety of tasks required to make expressive and interactive contents that user love. Its major benefit by far is direct HTML support for drawing, animation, video and audio. With its canvas element rendered with JavaScript, HTML5 allows you to come up with amazing effects within the area defined by the height and width of the canvas tag using the height and width attributes.
Here, we are sharing with you some HMTL5 and JavaScript experiments that demonstrates the performance of the framework in rendering a variety of cool interactive effects. Most of the demonstrations here run smoothly with Google Chrome and Firefox but not in Internet Explorer as HTML5 is not yet fully supported by it. For optimum performance please use the first two browsers. Enjoy!
Sticky Thing
Throw it and see if it sticks.
Multiplayer Piano
A multiplayer piano built with JavaScript and socket.io. Viewed with Chrome, the page busts out the Web Audio API.
Breathing Galaxies
Breathing Galaxies is a hypotrochoid with dynamically changing color and diameter powered by JavaScript. You can use the keyboard to change shapes mid-stream, or move the mouse to create a new shape.
PlasmaTree
Inspired by nature – a visual presentation of a algorithm
Asteroid Belt
HTML5 animation effect on rendered on a photo.
Graph Layout
An interactive force-directed graph layout.
Swirling Tentacles
Pulsing 3d wires with color cycling and camera tweening, in 1k of JavaScript.
Flower Power
Another experiment inspired by nature – simple drawing tool with flowers as brushes using bezier curves.
One Hour Per Second
Holy nyans! YouTube now has one hour of video uploaded to the site every second. To put that incredible figure in context, Youtube created an HTML5 site with some figures to compare it to — for example, how many nyan cat “nyans” there are in one day (e.g. 24 seconds of uploads)? Answer: 345,600!
Circle Game
A game made with the HTML5 canvas. Eat smaller circles to grow, avoid larger ones.
Neon Flames
An interactive drawing tool based on particles using HDR rendering.
Solar System
Solar System in 3D.
FastKat
A fast and psychedelic race inside a minimalistic world. Reach the max speed to score.
Globe Genie
Globe Genie transports you to a random spot somewhere across the world
Chaotic Particles
A particle system with an acceleration map and a feedback loop, or simply some particles dancing in the void. Works on Android and iOS too!
Noise Field
Particle trails via Perlin noise. Move mouse to change particle motion. Click to randomize parameters.
8-bit color cycle
An implementation of a full 8-bit color cycling engine, rendered into an HTML5 Canvas in real-time.
Fishbowl
An amazing HTML 5 test, created by Microsoft to test the performance capability of your browser. Try it and see how many fishes you can run.
Marbles
Simple physics demo using the freshly released A3 WebGL Engine.
Canvas Sphere
Canvas Sphere by Emil Korngold renders a 2D projection of the 3D points of a sphere using a tiny sprite 3D engine. The demo uses z-sorting and alpha motion blurring to give the sense of 3D and rotation.
If you have any comment or suggestion, you can write them below. You are also welcome to add the link of your favorite HTML5 and JavaScript experiment that we might have missed. Social media share is highly recommended as well.
Recent Comments
30+ Exciting WordPress Gaming Themes – Want Unfair Advantages?
60+ Beautiful Tri-Fold Brochure Designs and Premium Brochure Templates
30+ Exciting WordPress Gaming Themes – Want Unfair Advantages?