How to make Google Chrome do the Harlem Shake
Code:
http://bit.ly/13dG9jU
---------------------------------------------------------------------------------
How it works:
"1) Finds "large" content on the page. This can be a box containing text, or larger images, anything that is actually visible. Note that most web pages have a lot of elements defined in code, but not very visible (if at all) on the page.
2) For each element, it assignes a specific "class name". This allows the script to identify the elements at any point.
3) It loads the audio file from http://s3.amazonaws.com/moovweb-...
4) It loads a CSS file from http://s3.amazonaws.com/moovweb-.... The CSS file defines how the elements "shake", for how long and other similar properties. The CSS file actually uses the "class names" defined before to identify the larger blocks on the web page, for full effect.
The author must have used a code minifier just to make it easier for everyone to use (Online YUI Compressor is an example). I used an Online JavaScript beautifier to reformat the code and it's pretty easy to see what's going on for technical people/programmers, even if functions and variables have been renamed to only be one character in length: ClaudiuC/Chrome Harlem Shake.
Edit: This wouldn't really be possible without HTML5's audio standard and CSS3 animations."
Source:
Claudiu Ceia in "Harlem Shake: How does the Google Chrome Harlem Shake code work?"
http://www.quora.com/Harlem-Shake/How...
---------------------------------------------------------------------------------
Music:
Baauer- Harlem Shake
---------------------------------------------------------------------------------
Programms used:
-Camstudio
-Windows Live Movie Maker
-Blender
---------------------------------------------------------------------------------