diff options
Diffstat (limited to 'chobani/black.html')
| -rw-r--r-- | chobani/black.html | 197 |
1 files changed, 197 insertions, 0 deletions
diff --git a/chobani/black.html b/chobani/black.html new file mode 100644 index 0000000..d3afc1e --- /dev/null +++ b/chobani/black.html @@ -0,0 +1,197 @@ +<!doctype> +<html> +<head> + <title>rain</title> + <style type="text/css"> + * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } + .mx-object3d { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } + html,body{ margin: 0; padding: 0; width:100%;height:100%;} + body { + -webkit-perspective: 600px; + -moz-perspective: 600px; + perspective: 1000px; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + -o-user-select: none; + user-select: none; + overflow:hidden; + position:fixed; + top:0; + left:0; + width:100%; + height:100%; + cursor:move; + font-family:sans-serif; + background-color: black; + } + .text { + font-size: 100px; + color: white; + } + #flip{ + display:none; + } + #bg { + pointer-events: none; + position: fixed; + width: 100%; + top: 0; + height: 100%; + z-index: 0; + cursor:move; + left:0; + } + </style> + <body> + <div id="info"></div> + <div id="flip">FLIP</div> + <div id="bg"></div> + </body> + <script type="text/javascript" src="http://okfoc.us/beentrill/shirts/assets/js/vendor/jquery-1.10.2.min.js"></script> + <script type="text/javascript" src="http://okfoc.us/beentrill/shirts/assets/js/vendor/jquery-nodoubletapzoom.js"></script> + <script type="text/javascript" src="http://okfoc.us/beentrill/shirts/assets/js/vendor/mx.min.js"></script> + <script type="text/javascript" src="http://okfoc.us/beentrill/shirts/assets/js/vendor/mx.gyroControl.js"></script> + <script type="text/javascript" src="http://okfoc.us/beentrill/shirts/assets/js/vendor/mx.rotationControl.js"></script> + <script type="text/javascript" src="http://okfoc.us/beentrill/shirts/assets/js/vendor/mx.scene.js"></script> + <script type="text/javascript" src="http://asdf.us/dither/js/util.js"></script> + <script type="text/javascript" src="http://okfoc.us/beentrill/shirts/assets/js/image.js"></script> + <script type="text/javascript"> + (function( ua ) { + ua = ua.toLowerCase(); + var match = /(chrome)[ \/]([\w.]+)/.exec( ua ) || + /(webkit)[ \/]([\w.]+)/.exec( ua ) || + /(opera)(?:.*version|)[ \/]([\w.]+)/.exec( ua ) || + /(msie) ([\w.]+)/.exec( ua ) || + 0 > ua.indexOf("compatible") && /(mozilla)(?:.*? rv:([\w.]+)|)/.exec( ua ) || + []; + var matched = { + browser: match[ 1 ] || "", + version: match[ 2 ] || "0" + }; + browser = {}; + if ( matched.browser ) { + browser[ matched.browser ] = true; + browser.version = matched.version; + } + // Chrome is Webkit, but Webkit is also Safari. + if ( browser.chrome ) { + browser.webkit = true; + } else if ( browser.webkit ) { + browser.safari = true; + } + $.browser = browser; + return browser; + })( navigator.userAgent ); + + $(window).load(function(){ + scene.init(); + }); + + var scene = new function(){} + scene.init = function(){ + MX.rotationUnit = 'deg' + + scene.control = new MX.RotationControl() + // scene.control.disableY = true + scene.control.lowerBoundY = -50 + scene.control.upperBoundY = 50 + scene.control.lowerBoundX = -30 + scene.control.upperBoundX = 30 + + scene.parent = new MX.Object3D("#scene") + scene.parent.addTo("#info"); + scene.parent.perspective = 600 + scene.parent.update() + + scene.parent.rotationY = -5 + scene.parent.rotationX = 5 + + hashtags.init() + + // if (is_mobile) { + // hashtags.parent.scale = 0.8 + // } + + $("#flip").click(function(){ + scene.flip() + }) + + scene.control.init(scene.parent) + scene.animate(0) + } + scene.animate = function (t) { + requestAnimationFrame(scene.animate) + t /= 500 + + scene.control.update() + scene.parent.update() + + hashtags.animate(t) + } + scene.reverse = false + scene.flip = function(){ + scene.reverse = ! scene.reverse + var rotation = scene.control.rotationY % 180; + if (scene.reverse) { + scene.control.rotationY = scene.control.rotationY - rotation + 180 * 3 + } + else { + scene.control.rotationY = scene.control.rotationY - rotation - 180 * 3 + } + } + + var hashtags = new function(){} + hashtags.init = function(){ + this.parent = new MX.Object3D('.mx-rapper') + this.parent.addTo(scene.parent) + + this.children = [] + + var count = $.browser.mozilla ? 50 : 100 + var w = window.innerWidth, h = window.innerHeight + for (var i = 0; count > i; i++) { + var hash = new MX.Image({ + src: 'http://okfocus.s3.amazonaws.com/emoji/' + (randint(845) + 1) + ".png", + scale: 1.0 + }) + var theta = TWO_PI*random() + hash.x = sin(theta) * randrange(h/2, h*1.2) + hash.y = Math.cos(TWO_PI*random()) * randrange(h/2, h*1.2) + hash.z = randrange(z_min, z_max) + hash.rotationZ = random()*360 + hash.el.style.opacity = 1.0 + hash.dz = randrange(-800,-200) + hash.drz = randrange(-1,1)/2 + hash.addTo(this.parent); + hash.update() + } + } + hashtags.show = function(){ + hashtags.parent.el.style.opacity = 1 + } + hashtags.hide = function(){ + hashtags.parent.el.style.opacity = 0 + } + var z_min = -1000, z_fade = 2000, z_max = 4000 + hashtags.animate = function (t) { + scene.control.rotationZ += 1 + var dt = ~Math.sin(t) * 0.1 + hashtags.parent.children.forEach(function(item){ + item.z -= ~~(item.dz*dt) + item.rotationZ += item.drz + if (z_min > item.z) { + item.loadTexture({ + src: 'http://okfocus.s3.amazonaws.com/emoji/' + (randint(845) + 1) + ".png", + }) + item.z = z_max + } + if (item.z >= z_max-z_fade) { + item.el.style.opacity = lerp((z_max-item.z)/z_fade, 0.0, 1.0) + } + item.update() + }) + } + + </script> + </html> |