Playback starts YouTube’s embedded player (privacy-enhanced mode).
How to make Google Chrome do the Harlem Shake
ChannelTuToMaster007Description from the creator
Code:
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 s3.amazonaws.com/moovweb-...
4) It loads a CSS file from 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?"
quora.com/Harlem-Shake/How-does-the-Google-Chro…
-----------------------------------------------------------------------------------
Music:
Baauer- Harlem Shake
-----------------------------------------------------------------------------------
Programms used:
-Camstudio
-Windows Live Movie Maker
-Blender
-----------------------------------------------------------------------------------
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 s3.amazonaws.com/moovweb-...
4) It loads a CSS file from 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?"
quora.com/Harlem-Shake/How-does-the-Google-Chro…
-----------------------------------------------------------------------------------
Music:
Baauer- Harlem Shake
-----------------------------------------------------------------------------------
Programms used:
-Camstudio
-Windows Live Movie Maker
-Blender
-----------------------------------------------------------------------------------
About this tutorial
TuToMaster007 published this 2:08 video tutorial on November 11, 2013. It has been watched 218,084 times on YouTube.
- Channel
- TuToMaster007
- Category
- Film & Animation
- Duration
- 2:08
- Published
- November 11, 2013
- Views
- 218,084
- Likes
- 861
Tags
Share
This tutorial in other languages
- FRComment faire Google Chrome faire le Harlem Shake
- ESCómo hacer que Google Chrome hacer el Harlem Shake
- PTComo tornar o Google Chrome fazer o Harlem Shake
- ITCome rendere Google Chrome fare il harlem shake
- DEWie macht man Google Chrome die Harlem schütteln tun
- NLHoe maak je Google Chrome doet de Harlem Shake
- RUКак сделать Google Chrome сделать Harlem Shake
- PLJak sprawić, by Google Chrome wykonaj Harlem Shake
- JAGoogle Chromeはハーレムシェイクを行うようにする方法
- ARكيفية جعل جوجل كروم تفعل هارلم اهتز
- HIकैसे गूगल क्रोम कर हार्लेम शेक बनाने के लिए
- IDCara membuat Google Chrome melakukan Harlem Shake