10 Jaw Dropping HTML5 and Javascript Effects

Written by Kevin Liew on 31 Aug 2010
234,345 Views • Inspirations

Introduction

Alright, HTML5 has been released for quite a while now, and its capabilities never cease to amaze me. Here, I have got 10 more HTML and Javascript demonstrations that show you what they can do. Back to few years ago, implementation of these kind of animations are simply impossible and only can be done with Flash, but now, look at them, impressive animations and effects!

I have done a few posts before this, just in case you've missed the previous display of the awesomeness of HTML5 and Javascript, here is the lists, make sure you check them out:

Personally, I like Blob, keylight and noise field a lot, what do you think?

  • Breathing Galaxies
    Breathing Galaxies
    Hypotrochoid with dynamically changing color and diameter. Use the keyboard to change shapes mid-stream, or move the mouse to create a new shape.
  • Noise Field
    Noise Field
    Particle trails via Perlin noise. Move mouse to change particle motion. Click to randomize parameters.
  • Keylight
    Keylight
    A playhead travels between keys which resonate in different sounds depending on where they are placed.
  • Swirling Tentacles
    Swirling Tentacles
    Pulsing 3d wires with color cycling and camera tweening, in 1k of JavaScript.
  • FlowerPower
    FlowerPower
    Another experiment inspired by nature - simple drawing tool with flowers as brushes using bezier curves.
  • Blob
    Blob
    A soft blob that can be thrown around the screen so that it bounces against the browser window. The blob can also be split (double click) into many blobs, the smaller blobs will merge into a single bigger blob if they collide.
  • Rotating Spiral
    Rotating Spiral
    You are getting sleepy, very sleepy.... A resolution independent rotating spiral – simple, but visually compelling. Click to start, stop, and reverse the rotation.
  • Magnetic
    Magnetic
    Magnetic points are used to control a flow of particles. If there are many particles orbiting a magnet, it will radiate color and increase in size.
  • Trail
    Trail
    Colorful particles follow and rotate around the mouse position to generate an organic trail which then fades out slowly.
  • Graph Layout
    Graph Layout
    An interactive force-directed graph layout.
Join the discussion

Comments will be moderated and rel="nofollow" will be added to all links. You can wrap your coding with [code][/code] to make use of built-in syntax highlighter.

22 comments
Jackie Chan 14 years ago
Tanks Jet Li, It's very useful!
Reply
dlv 14 years ago
wow, i've never seen this kind of things like chromeexperiments.com showcase, really stunning !
thanks kevin for share them !!

adeux
Reply
brutally honest dude 14 years ago
reminds of flash 10 years ago
Reply
Beben 14 years ago
:-bd
Reply
johnblo 14 years ago
Damn! really awesome :) love it

i cant believe all these are made up from html 5 :P
Reply
Matt @ WMpS 14 years ago
Love Blob! Addictive and good for stress relief!
Reply
Magento 14 years ago
Superb and useful. Thanks for this list!
Reply
Ore crusher 14 years ago
It is so cool. Html5 and css3, and javascript must be the best substitute of flash.
Reply
dwight vietzke 14 years ago
Wow, who knew... Very cool effects and from such small code. Thanks for the post. Simply awesome.
Reply
Coupon code 14 years ago
Cool effects! Great idea.
Thanks Kevin
Reply
flash slideshow 13 years ago
Wow! I'm stunned this is beatiful, so flash is getting some competition form html5 and javascript
Reply
nayan 13 years ago
how can i download this script???
Reply
omg 11 years ago
oh my.
Reply
Mehul 13 years ago
superb... its very beautiful... but u need to be maths genius. but still with HTML5 and jquery will reduce very much efforts and file size.. hope all browsers will support html5 very soon..

Again this is great work and demonstrations..

I am FAN now..
Reply