diff options
Diffstat (limited to 'pouring/index.html')
| -rw-r--r-- | pouring/index.html | 179 |
1 files changed, 179 insertions, 0 deletions
diff --git a/pouring/index.html b/pouring/index.html new file mode 100644 index 0000000..6a74122 --- /dev/null +++ b/pouring/index.html @@ -0,0 +1,179 @@ +<!doctype> +<html> +<head> + <title>IT'S RAINING WEEDLEAVES!!!!!!!!!!!!!</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: 600px; + -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: white; + } + .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://okfoc.us/beentrill/shirts/assets/js/vendor/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 ) || + ua.indexOf("compatible") < 0 && /(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.disableX = true + + scene.parent = new MX.Object3D("#scene") + scene.parent.addTo("#info"); + scene.parent.perspective = 800 + scene.parent.update() + 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) + + function rand(){ return Math.random()*2-1 } + function randrange(a,b) { return Math.random()*(b-a)+a } + this.children = [] + + var count = $.browser.mozilla ? 50 : 100 + for (var i = 0; i < count; i++) { + var speed = randrange(40,150) + var hash = new MX.Image({ + src: 'http://upload.wikimedia.org/wikipedia/commons/thumb/4/44/Cannabis_leaf_2.svg/200px-Cannabis_leaf_2.svg.png', + scale: 0.5 + }) + hash.y = rand() * 800 + hash.x = rand() * window.innerWidth/2 + hash.z = rand() * 400 + hash.rotationY = rand()*360 + hash.el.style.fontSize = speed + hash.dy = -speed - 10 + hash.addTo(this.parent); + hash.update() + } + } + hashtags.show = function(){ + hashtags.parent.el.style.opacity = 1 + } + hashtags.hide = function(){ + hashtags.parent.el.style.opacity = 0 + } + hashtags.animate = function (t) { + scene.control.rotationY += 1 + var dt = ~Math.sin(t) * 0.1 + hashtags.parent.children.forEach(function(item){ + item.y -= ~~(item.dy*dt) + item.update() + if (item.y < -500) item.y = 1000 + }) + } + + </script> + </html> |