QNimate

  • CoursesVideos
  • WP PremiumPlugins
  • DemosLab
  • Bitcoin BankingBuy, Sell, Store and Earn Interest
  • Home
  • QIdea
  • QTrack
Home Carbon Ads “do the harlem shake” effect on any website with JavaScript

“do the harlem shake” effect on any website with JavaScript

You can add “do the harlem shake” effect to your website by placing the below JavaScript code in your site.
Live Demo

(function() {
    function h() {
        var e = document.createElement("link");
        e.setAttribute("type", "text/css");
        e.setAttribute("rel", "stylesheet");
        e.setAttribute("href", l);
        e.setAttribute("class", c);
        document.body.appendChild(e)
    }

    function p() {
        var e = document.getElementsByClassName(c);
        for (var t = 0; t < e.length; t++) {
            document.body.removeChild(e[t])
        }
    }

    function d() {
        var e = document.createElement("div");
        e.setAttribute("class", f);
        document.body.appendChild(e);
        setTimeout(function() {
            document.body.removeChild(e)
        }, 100)
    }

    function v(e) {
        return {
            height: e.offsetHeight,
            width: e.offsetWidth
        }
    }

    function m(i) {
        var s = v(i);
        return s.height > e && s.height < n && s.width > t && s.width < r
    }

    function g(e) {
        var t = e;
        var n = 0;
        while (!!t) {
            n += t.offsetTop;
            t = t.offsetParent
        }
        return n
    }

    function y() {
        var e = document.documentElement;
        if (!!window.innerWidth) {
            return window.innerHeight
        } else if (e && !isNaN(e.clientHeight)) {
            return e.clientHeight
        }
        return 0
    }

    function b() {
        if (window.pageYOffset) {
            return window.pageYOffset
        }
        return Math.max(document.documentElement.scrollTop, document.body.scrollTop)
    }

    function S(e) {
        var t = g(e);
        return t >= E && t <= w + E
    }

    function x() {
        var e = document.createElement("audio");
        e.setAttribute("class", c);
        e.src = i;
        e.loop = false;
        var t = false,
            n = false,
            r = false;
        e.addEventListener("timeupdate", function() {
            var i = e.currentTime,
                s = D,
                o = s.length,
                u;
            if (i >= .5 && !t) {
                t = true;
                T(_)
            }
            if (i >= 15.5 && !n) {
                n = true;
                k();
                d();
                for (u = 0; u < o; u++) {
                    N(s[u])
                }
            }
            if (e.currentTime >= 28.4 && !r) {
                r = true;
                C()
            }
        }, true);
        e.addEventListener("ended", function() {
            k();
            p()
        }, 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>";
        document.body.appendChild(e);
        e.play()
    }

    function T(e) {
        e.className += " " + s + " " + u
    }

    function N(e) {
        e.className += " " + s + " " + a[Math.floor(Math.random() * a.length)]
    }

    function C() {
        var e = document.getElementsByClassName(s);
        for (var t = 0; t < e.length;) {
            e[t].className = e[t].className.replace(s, o)
        }
        s = o
    }

    function k() {
        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.ogg";
    var s = "mw-harlem_shake_me";
    var o = "mw-harlem_shake_slow";
    var u = "im_first";
    var a = ["im_drunk", "im_baked", "im_trippin", "im_blown"];
    var f = "mw-strobe_light";
    var l = "//s3.amazonaws.com/moovweb-marketing/playground/harlem-shake-style.css";
    var c = "mw_added_css";
    var w = y();
    var E = b();
    var L = document.getElementsByTagName("*"),
        A = L.length,
        O, M;
    var _ = null;
    for (O = 0; O < A; O++) {
        M = L[O];
        if (m(M)) {
            if (S(M)) {
                _ = M;
                break
            }
        }
    }
    if (M === null) {
        console.warn("Could not find a node of the right size. Please try a different page.");
        return
    }
    h();
    x();
    var D = [];
    for (O = 0; O < A; O++) {
        M = L[O];
        if (m(M)) {
            D.push(M)
        }
    }
})()

Credit goes to Moovweb.

Feb 2, 2015Narayan Prusty
Underscores.me TutorialWordPress Enable or Disable Auto Update

Leave a Reply Cancel reply

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

Narayan Prusty

I am a full-stack web developer. I specialize in Blockchain and JavaScript. This is my personal blog where I write about programming and technologies that I learn and feel interesting to share.

6 years ago Web Development
Share this
0
GooglePlus
0
Facebook
0
Twitter
0
Linkedin
Related Articles
  • Creating A Simple Backdrop Effect
  • Create Raining Effect using JavaScript
  • Detect Shake using JavaScript
  • Generate Unique Number in JavaScript
  • JavaScript Promise vs Callback
Our Sponsor
Freelance: I am available
@narayanprusty
Hi, I am a full-stack developer - focusing on JavaScript, WordPress, Blockchain, DevOps, Serverless and Cordova. You can outsource your app development to me.





Will get back to you soon!!!
WordPress
ReactJS
Meteor
Blockchain
Serverless
Kubernetes
DevOps
DB & Storage
Ejabberd
Let's get started
My Books

2014 - 2015 © QNimate
All tutorials MIT license