HDTutorial
EN

Playback starts YouTube’s embedded player (privacy-enhanced mode).

How to make Google Chrome do the Harlem Shake

218,084 views November 11, 2013 2:08

Watch on YouTube
ChannelTuToMaster007

Description 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
----------------------------------------­----------------------------------------­---

About this tutorial

TuToMaster007 published this 2:08 video tutorial on November 11, 2013. It has been watched 218,084 times on YouTube.

Duration
2:08
Published
November 11, 2013
Views
218,084
Likes
861

Tags

Share

This tutorial in other languages