Skip to content

Instantly share code, notes, and snippets.

@thehalvo

thehalvo/index.html

Created January 27, 2017 21:18
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save thehalvo/6ea0ac1bf8083c02f8ddfb58695e57eb to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save thehalvo/6ea0ac1bf8083c02f8ddfb58695e57eb to your computer and use it in GitHub Desktop.
Download ZIP
Spinny JavaScript Background
Raw
index.html
<section id="intro">
</section>
Raw
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();
Raw
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>
Raw
spinny-javascript-background.markdown
Raw
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%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment