Spinny JavaScript Background

index.html

<section id="intro">

</section>

script.js

function viewport() {
    var t = window,
        n = "inner";
    return "innerWidth" in window || (n = "client", t = document.documentElement || document.body), {
        width: t[n + "Width"],
        height: t[n + "Height"]
    }
}
var Anim = function() {
        function t(t, n, u, c, h) {
            i = t, o = n, r = u, a = 0, s = c, e = h
        }

        function n() {
            var t;
            return t = i > o ? i - (i - o) * (a / s) : i + (o - i) * (a / s), a++, a >= s && (a = 0, e.call()), t
        }
        var e, i = 0,
            o = 0,
            r = 0,
            a = 0,
            s = 0;
        this.init = t, this.update = n
    },
    Pattern = function() {
        function t() {
            v = new Anim, m = new Anim, M = new Anim, E = Math.random() * $(window).width(), T = Math.random() * $(window).height(), f = PIXI.autoDetectRenderer(b, P), $(h).append(f.view), w = new PIXI.Stage(c), g = new PIXI.DisplayObjectContainer, w.addChild(g), p = new PIXI.Graphics, w.addChild(p)
        }

        function n() {
            var t = C,
                e = 4 * Math.random() + 2,
                i = 120 + Math.floor(360 * Math.random());
            v.init(t, e, 1, i, n), C = e
        }

        function e() {
            var t = A,
                n = 4 * Math.random() + 2,
                i = 120 + Math.floor(360 * Math.random());
            m.init(t, n, 1, i, e), A = n
        }

        function i() {
            var t = Q,
                n = 4,
                e = Math.PI + Math.random() * Math.PI * n,
                o = 120 + Math.floor(360 * Math.random());
            M.init(t, e, 1, o, i), Q = e
        }

        function o() {
            var t = w.getMousePosition();
            mousePercent = Math.max(-1, Math.min(1, (t.x - .5 * b) / (.5 * b))), mousePercent = 1
        }

        function r() {
            var t, n, e, i = Math.floor(b / O) + 1,
                o = Math.floor(P / O) + 1;
            if (i > S || o > x)
                for (var r = Math.max(0, i * o - B.length), a = 0; a < r; a++) e = new PIXI.Graphics, e.lineStyle(2, d), e.moveTo(-1, -5), e.lineTo(-1, 10), e.endFill(), e.cacheAsBitmap = !0, g.addChild(e), B.push(e);
            S = i, x = o;
            var s = 0;
            for (t = 0; t < o; t++)
                for (n = 0; n < i; n++) e = B[s], e.x = Math.floor(n * O + .5 * O), e.y = Math.floor(t * O + .5 * O), s++;
            for (var a = 0; a < B.length; a++) e = B[a], e.x > b || e.y > P ? e.visible = !1 : e.visible = !0
        }

        function a() {
            var t = v.update(),
                n = m.update(),
                e = M.update();
            E += t * k, T += n * D, (E <= 0 || E >= b) && (E <= 0 && (E = 0), E >= b && (E = b), k *= -1), (T <= 0 || T >= P) && (T <= 0 && (T = 0), T >= P && (T = P), D *= -1);
            for (var i, r, a, s, u, c = 0; c < B.length; c++) {
                i = B[c], r = Math.sqrt((E - i.x) * (E - i.x) + (T - i.y) * (T - i.y)), a = Math.sqrt(b * b + P * P), a *= .5, s = 1 - r / a, u = Math.max(3, 15 * s);
                var h = b > 720 ? Math.max(.2, 1.5 * s) : Math.max(.3, 1.1 * s);
                i.scale = new PIXI.Point(1, Math.max(.2, h));
                var d = b > 720 ? 1 : .65;
                i.rotation = e * s * d
            }
            o(), f.render(w)
        }

        function s(o, r, s, u) {
            c = o, h = r, d = s, l = u, t(), n(), e(), i(), a()
        }

        function u(t, n) {
            b = t, P = n, f.resize(b, P), r(), o()
        }
        var c, h, d, l, f, w, g, p, v, m, M, y = 960,
            I = 540,
            O = 40,
            b = y,
            P = I,
            S = 0,
            x = 0,
            C = 5,
            A = 5,
            E = 0,
            T = 0,
            k = 1,
            D = 1,
            Q = 2 * Math.PI,
            B = [];
        this.init = s, this.resize = u, this.renderStage = a
    };

var BrowserDetect = {
    init: function() {
        this.browser = this.searchString(this.dataBrowser) || "Other", this.version = this.searchVersion(navigator.userAgent) || this.searchVersion(navigator.appVersion) || "Unknown"
    },
    searchString: function(t) {
        for (var n = 0; n < t.length; n++) {
            var e = t[n].string;
            if (this.versionSearchString = t[n].subString, e.indexOf(t[n].subString) !== -1) return t[n].identity
        }
    },
    searchVersion: function(t) {
        var n = t.indexOf(this.versionSearchString);
        if (n !== -1) {
            var e = t.indexOf("rv:");
            return "Trident" === this.versionSearchString && e !== -1 ? parseFloat(t.substring(e + 3)) : parseFloat(t.substring(n + this.versionSearchString.length + 1))
        }
    },
    dataBrowser: [{
        string: navigator.userAgent,
        subString: "Chrome",
        identity: "Chrome"
    }, {
        string: navigator.userAgent,
        subString: "MSIE",
        identity: "Explorer"
    }, {
        string: navigator.userAgent,
        subString: "Trident",
        identity: "Explorer"
    }, {
        string: navigator.userAgent,
        subString: "Firefox",
        identity: "Firefox"
    }, {
        string: navigator.userAgent,
        subString: "Safari",
        identity: "Safari"
    }, {
        string: navigator.userAgent,
        subString: "Opera",
        identity: "Opera"
    }]
};
BrowserDetect.init();
var MobileDetect = function() {
    return {
        detect: function() {
            for (var t = navigator.userAgent.toLowerCase(), n = this.mobiles, e = !1, i = 0; i < n.length; i += 1) t.indexOf(n[i]) != -1 && (e = !0);
            return e
        },
        detectIpad: function() {
            var t = navigator.userAgent.toLowerCase(),
                n = !1;
            return t.indexOf("ipad") != -1 && (n = !0), n
        },
        mobiles: ["midp", "240x320", "blackberry", "netfront", "nokia", "panasonic", "portalmmm", "sharp", "sie-", "sonyericsson", "symbian", "windows ce", "benq", "mda", "mot-", "opera mini", "philips", "pocket pc", "sagem", "samsung", "sda", "sgh-", "vodafone", "xda", "palm", "iphone", "ipod", "android", "windows phone"]
    }
}();
$(function() {
    function t() {
        var t = document.createElement("audio"),
            n = !(!t.canPlayType || !t.canPlayType('audio/ogg; codecs="vorbis"').replace(/no/, ""));
        if (n) return "ogg";
        var e = !(!t.canPlayType || !t.canPlayType("audio/mpeg;").replace(/no/, ""));
        return e ? "mp3" : 0
    }

    function n() {
        FastClick.attach(document.body), $.support.transition || ($.fn.transition = $.fn.animate), $("video").each(function() {
            window.makeVideoPlayableInline($(this)[0], !1)
        }), p = new Pattern, p.init(263325, "#contact", 15987699, 15987699), u(), c(), s(), $("body").attr("data-browser", BrowserDetect.browser).attr("data-version", BrowserDetect.version)
    }

    function e(t, n) {
        var e = new Audio;
        return e.src = t, e.preload = "auto", e.volume = n, $(e).on("loadeddata", o), e
    }

    function i() {
        "ogg" === b.audio ? v = e("/audio/enya_-_only_time.ogg", 1) : "mp3" === b.audio && (v = e("/audio/enya_-_only_time.mp3", 1))
    }

    function o() {
        O = !0, I = !0, b.audio && v.play()
    }

    function r() {
        I = !1, b.audio && v.pause()
    }

    function a() {
        I ? r() : O ? o() : i()
    }

    function s() {
        $("#overlay").delay(400).fadeOut("slow")
    }

    function u() {
        p.renderStage(), requestAnimationFrame(u)
    }

    function c() {
        $("#menu-contact").bind("click", l), $("#footer-back").bind("click", f), $(".nav-link").bind("click", h), $("#nav-icon").bind("click", d), $(window).keySequenceDetector("relax", function() {
            a()
        }), $(window).keySequenceDetector("enya", function() {
            a()
        }), $(window).keySequenceDetector("molano", function() {
            a()
        }), $(window).bind("scroll", w), $(window).bind("resize", g), $(window).on("orientationchange", g), g()
    }

    function h(t) {
        t.preventDefault(), y = this.href, $("#overlay").fadeIn("slow", function() {
            window.location = y
        })
    }

    function d(t) {
        t.preventDefault(), $(this).toggleClass("open"), $("header").toggleClass("open")
    }

    function l(t) {
        t.preventDefault(), m = !0, $("#menu-contact").addClass("selected"), $("#nav-icon").removeClass("open"), $("header").removeClass("open"), scrollToY($("#container").height() - window.windowHeight, 20, "easeInOutQuint")
    }

    function f(t) {
        t.preventDefault(), scrollToY(0, 20, "easeInOutQuint")
    }

    function w(t) {
        $(window).scrollTop() >= $("#container").height() - window.windowHeight && !$("#menu-contact").hasClass("selected") ? $("#menu-contact").addClass("selected") : $(window).scrollTop() < $("#container").height() - window.windowHeight && $("#menu-contact").hasClass("selected") && !m ? $("#menu-contact").removeClass("selected") : $(window).scrollTop() >= $("#container").height() - window.windowHeight && (m = !1), $(window).scrollTop() >= $("#container").height() - window.windowHeight - .5 * $("#contact").height() && !M ? (M = !0, $("#contact-holder").fadeIn("slow")) : $(window).scrollTop() < $("#container").height() - window.windowHeight - $("#contact").height() && M && (M = !1, $("#contact-holder").hide())
    }

    function g(t) {
        if (window.windowWidth = viewport().width, window.windowHeight = $(window).height(), $("#overlay").height(window.windowHeight), p.resize($(window).innerWidth(), $("#contact").height()), $(".half").length > 0 && $(".half").height($(".half").width() - 1), $(".vimeo-frame").length > 0) {
            var n = Math.floor(9 * $(".vimeo-frame").width() / 16);
            $(".vimeo-frame").height(n)
        }
        if ($(".photo-hero").length > 0) {
            var e = Math.floor(9 * $(".photo-hero").width() / 16);
            $(".photo-hero").height(e)
        }
        if ($(".section-photo").length > 0) {
            var i = Math.floor(640 * $(".section-photo").width() / 1500);
            $(".section-photo").height(i)
        }
        if ($(".image-grid").length > 0) {
            var o = Math.floor(1e3 * $(".image-grid").width() / 1500);
            $(".image-grid").height(o)
        }
        if ($(".grid-videos").length > 0) {
            var r = Math.floor(9 * $(".grid-videos-video-holder").width() / 16);
            $(".grid-videos").height(r), $(".grid-videos-video-holder").height(r), $(".grid-videos video").height(r)
        }
        "undefined" != typeof HOME && HOME.resize(), "undefined" != typeof PROFILE && PROFILE.resize(), "undefined" != typeof WORK && WORK.resize(), "undefined" != typeof PROJECT && PROJECT.resize(), "undefined" != typeof TALKS && TALKS.resize(), "undefined" != typeof AH && AH.resize(), w()
    }
    var p, v, m = !1,
        M = !1,
        y = "/",
        I = !1,
        O = !1,
        b = {};
    b.audio = t(), n()
}), PIXI.Graphics.prototype.updateLineStyle = function(t, n, e) {
    for (var i = this.graphicsData.length, o = 0; o < i; o++) {
        var r = this.graphicsData[o];
        r.lineColor && n && (r.lineColor = n), this.dirty = !0, this.clearDirty = !0
    }
};

var HOME = function() {
    function i() {
        t.renderStage(), requestAnimationFrame(i)
    }

    function e() {
        t = new Pattern, t.init(15987699, "#intro", 263325, 263325), i(), $(".covervid-video").coverVid(1280, 720)
    }

    function n() {
        $("#intro").height(Math.floor(Math.max(540, .75 * window.windowHeight))), t.resize($(window).innerWidth(), $("#intro").height());
        var i = $("#intro").height();
        $("#home-work").height(i), $("#home-work-video-holder").height(i)
    }
    var t;
    return {
        init: e,
        resize: n
    }
}();
HOME.init();

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="http://codepen.io/halvo/pen/EZbWMx"></script>

spinny-javascript-background.markdown

Spinny JavaScript Background

A funky masthead from a-l-a-a.com.

Stay trippy y'all

A Pen by Jordan Halvorsen on CodePen.

License.

style.css

html {
    border: 0;
    margin: 0;
    padding: 0;
    width: 100%;
    height: auto;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

*,*:before,*:after {
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
    box-sizing: inherit;
}

body {
    background-color: #fff;
    padding: 0;
    margin: 0;
    height: auto;
    width: 100%;
}