Skip to content

Instantly share code, notes, and snippets.

@NicolaiSoeborg

NicolaiSoeborg/harlem-shake.js

Forked from jonathantneal/harlem-shake.js
Last active July 9, 2020 19:22
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save NicolaiSoeborg/df8fd374e94cbadedb0902858c1354c2 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save NicolaiSoeborg/df8fd374e94cbadedb0902858c1354c2 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. NicolaiSoeborg revised this gist Jan 21, 2019. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion harlem-shake.js
    View file
    Original file line number Diff line number Diff line change
    @@ -62,7 +62,7 @@
    }, true);
    e.addEventListener("ended", function () {
    cleanup();
    [...document.getElementsByClassName("mw_added_css")].forEach(element => {
    [...document.body.getElementsByClassName("mw_added_css")].forEach(element => {
    document.body.removeChild(element)
    });
    }, true);
  2. NicolaiSoeborg revised this gist Jan 21, 2019. 1 changed file with 49 additions and 96 deletions.
    145 changes: 49 additions & 96 deletions harlem-shake.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,37 +1,25 @@
    javascript: (function () {
    function c() {
    var e = document.createElement("link");
    (function () {
    function setup() {
    const e = document.createElement("link");
    e.setAttribute("type", "text/css");
    e.setAttribute("rel", "stylesheet");
    e.setAttribute("href", f);
    e.setAttribute("class", l);
    e.setAttribute("href", "https://s3.amazonaws.com/moovweb-marketing/playground/harlem-shake-style.css");
    e.setAttribute("class", "mw_added_css");
    document.body.appendChild(e)
    }
    function h() {
    var e = document.getElementsByClassName(l);
    for (var t = 0; t < e.length; t++) {
    document.body.removeChild(e[t])
    }
    }
    function p() {
    function strobeLight() {
    var e = document.createElement("div");
    e.setAttribute("class", a);
    e.setAttribute("class", "mw-strobe_light");
    document.body.appendChild(e);
    setTimeout(function () {
    document.body.removeChild(e)
    }, 100)
    }
    function d(e) {
    return {
    height: e.offsetHeight,
    width: e.offsetWidth
    }
    }
    function v(i) {
    var s = d(i);
    function hasGoodSize(i) {
    var s = { height: i.offsetHeight, width: i.offsetWidth }
    return s.height > e && s.height < n && s.width > t && s.width < r
    }
    function m(e) {
    function elmOffset(e) {
    var t = e;
    var n = 0;
    while ( !! t) {
    @@ -40,98 +28,63 @@ javascript: (function () {
    }
    return n
    }
    function g() {
    function bottomHeight() {
    var e = document.documentElement;
    if ( !! window.innerWidth) {
    return window.innerHeight
    } else if (e && !isNaN(e.clientHeight)) {
    return window.innerHeight }
    else if (e && !isNaN(e.clientHeight)) {
    return e.clientHeight
    }
    return 0
    }
    function y() {
    if (window.pageYOffset) {
    return window.pageYOffset
    }
    return Math.max(document.documentElement.scrollTop, document.body.scrollTop)
    }
    function E(e) {
    var t = m(e);
    return t >= w && t <= b + w
    function isVisible(e) {
    const t = elmOffset(e);
    return t >= window.pageYOffset && t <= bottomHeight() + window.pageYOffset
    }
    function S() {
    function run() {
    var e = document.createElement("audio");
    e.setAttribute("class", l);
    e.src = i;
    e.setAttribute("class", "mw_added_css");
    e.src = "https://s3.amazonaws.com/moovweb-marketing/playground/harlem-shake.mp3";
    e.loop = false;
    e.addEventListener("canplay", function () {
    setTimeout(function () {
    x(k)
    startingElm.classList.add("mw-harlem_shake_me", "im_first");
    }, 500);
    setTimeout(function () {
    N();
    p();
    for (var e = 0; e < O.length; e++) {
    T(O[e])
    }
    cleanup();
    strobeLight();
    [...document.getElementsByTagName("*")]
    .filter(hasGoodSize)
    .forEach(element => {
    shakeElm(element);
    })
    }, 15500)
    }, true);
    e.addEventListener("ended", function () {
    N();
    h()
    cleanup();
    [...document.getElementsByClassName("mw_added_css")].forEach(element => {
    document.body.removeChild(element)
    });
    }, true);
    e.innerHTML = " <p>If you are reading this, it is because your browser does not support the audio element. We recommend that you get a new browser.</p> <p>";
    document.body.appendChild(e);
    e.play()
    }
    function x(e) {
    e.className += " " + s + " " + o
    }
    function T(e) {
    e.className += " " + s + " " + u[Math.floor(Math.random() * u.length)]
    }
    function N() {
    var e = document.getElementsByClassName(s);
    var t = new RegExp("\\b" + s + "\\b");
    for (var n = 0; n < e.length;) {
    e[n].className = e[n].className.replace(t, "")
    }
    }
    var e = 30;
    var t = 30;
    var n = 350;
    var r = 350;
    var i = "https://s3.amazonaws.com/moovweb-marketing/playground/harlem-shake.mp3";
    var s = "mw-harlem_shake_me";
    var o = "im_first";
    var u = ["im_drunk", "im_baked", "im_trippin", "im_blown"];
    var a = "mw-strobe_light";
    var f = "https://s3.amazonaws.com/moovweb-marketing/playground/harlem-shake-style.css";
    var l = "mw_added_css";
    var b = g();
    var w = y();
    var C = document.getElementsByTagName("*");
    var k = null;
    for (var L = 0; L < C.length; L++) {
    var A = C[L];
    if (v(A)) {
    if (E(A)) {
    k = A;
    break
    }
    }
    }
    if (A === null) {
    console.warn("Could not find a node of the right size. Please try a different page.");
    return
    }
    c();
    S();
    var O = [];
    for (var L = 0; L < C.length; L++) {
    var A = C[L];
    if (v(A)) {
    O.push(A)
    }
    }
    function shakeElm(e) {
    const u = ["im_drunk", "im_baked", "im_trippin", "im_blown"];
    e.classList.add("mw-harlem_shake_me", u[Math.floor(Math.random() * u.length)]);
    }
    function cleanup() {
    [...document.getElementsByClassName("mw-harlem_shake_me")].forEach(element => {
    element.classList.remove("mw-harlem_shake_me")
    });
    }
    // min+max element width / height (plus)
    const e = 20,
    n = 350,
    t = 20,
    r = 350,
    startingElm = [...document.getElementsByTagName("*")]
    .filter(elm => hasGoodSize(elm) && isVisible(elm))[0];
    setup();
    run();
    })()
  3. @jonathantneal jonathantneal revised this gist Oct 17, 2017. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions harlem-shake.js
    View file
    Original file line number Diff line number Diff line change
    @@ -101,12 +101,12 @@ javascript: (function () {
    var t = 30;
    var n = 350;
    var r = 350;
    var i = "//s3.amazonaws.com/moovweb-marketing/playground/harlem-shake.mp3";
    var i = "https://s3.amazonaws.com/moovweb-marketing/playground/harlem-shake.mp3";
    var s = "mw-harlem_shake_me";
    var o = "im_first";
    var u = ["im_drunk", "im_baked", "im_trippin", "im_blown"];
    var a = "mw-strobe_light";
    var f = "//s3.amazonaws.com/moovweb-marketing/playground/harlem-shake-style.css";
    var f = "https://s3.amazonaws.com/moovweb-marketing/playground/harlem-shake-style.css";
    var l = "mw_added_css";
    var b = g();
    var w = y();
  4. @nddrylliog nddrylliog created this gist Feb 19, 2013.
    137 changes: 137 additions & 0 deletions harlem-shake.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,137 @@
    javascript: (function () {
    function c() {
    var e = document.createElement("link");
    e.setAttribute("type", "text/css");
    e.setAttribute("rel", "stylesheet");
    e.setAttribute("href", f);
    e.setAttribute("class", l);
    document.body.appendChild(e)
    }
    function h() {
    var e = document.getElementsByClassName(l);
    for (var t = 0; t < e.length; t++) {
    document.body.removeChild(e[t])
    }
    }
    function p() {
    var e = document.createElement("div");
    e.setAttribute("class", a);
    document.body.appendChild(e);
    setTimeout(function () {
    document.body.removeChild(e)
    }, 100)
    }
    function d(e) {
    return {
    height: e.offsetHeight,
    width: e.offsetWidth
    }
    }
    function v(i) {
    var s = d(i);
    return s.height > e && s.height < n && s.width > t && s.width < r
    }
    function m(e) {
    var t = e;
    var n = 0;
    while ( !! t) {
    n += t.offsetTop;
    t = t.offsetParent
    }
    return n
    }
    function g() {
    var e = document.documentElement;
    if ( !! window.innerWidth) {
    return window.innerHeight
    } else if (e && !isNaN(e.clientHeight)) {
    return e.clientHeight
    }
    return 0
    }
    function y() {
    if (window.pageYOffset) {
    return window.pageYOffset
    }
    return Math.max(document.documentElement.scrollTop, document.body.scrollTop)
    }
    function E(e) {
    var t = m(e);
    return t >= w && t <= b + w
    }
    function S() {
    var e = document.createElement("audio");
    e.setAttribute("class", l);
    e.src = i;
    e.loop = false;
    e.addEventListener("canplay", function () {
    setTimeout(function () {
    x(k)
    }, 500);
    setTimeout(function () {
    N();
    p();
    for (var e = 0; e < O.length; e++) {
    T(O[e])
    }
    }, 15500)
    }, true);
    e.addEventListener("ended", function () {
    N();
    h()
    }, true);
    e.innerHTML = " <p>If you are reading this, it is because your browser does not support the audio element. We recommend that you get a new browser.</p> <p>";
    document.body.appendChild(e);
    e.play()
    }
    function x(e) {
    e.className += " " + s + " " + o
    }
    function T(e) {
    e.className += " " + s + " " + u[Math.floor(Math.random() * u.length)]
    }
    function N() {
    var e = document.getElementsByClassName(s);
    var t = new RegExp("\\b" + s + "\\b");
    for (var n = 0; n < e.length;) {
    e[n].className = e[n].className.replace(t, "")
    }
    }
    var e = 30;
    var t = 30;
    var n = 350;
    var r = 350;
    var i = "//s3.amazonaws.com/moovweb-marketing/playground/harlem-shake.mp3";
    var s = "mw-harlem_shake_me";
    var o = "im_first";
    var u = ["im_drunk", "im_baked", "im_trippin", "im_blown"];
    var a = "mw-strobe_light";
    var f = "//s3.amazonaws.com/moovweb-marketing/playground/harlem-shake-style.css";
    var l = "mw_added_css";
    var b = g();
    var w = y();
    var C = document.getElementsByTagName("*");
    var k = null;
    for (var L = 0; L < C.length; L++) {
    var A = C[L];
    if (v(A)) {
    if (E(A)) {
    k = A;
    break
    }
    }
    }
    if (A === null) {
    console.warn("Could not find a node of the right size. Please try a different page.");
    return
    }
    c();
    S();
    var O = [];
    for (var L = 0; L < C.length; L++) {
    var A = C[L];
    if (v(A)) {
    O.push(A)
    }
    }
    })()