diff options
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 184 |
1 files changed, 9 insertions, 175 deletions
@@ -1,177 +1,11 @@ -<!doctype> +<!doctype html> <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 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: randrange(0.3,0.6) - }) - hash.y = rand() * 800 - hash.x = rand() * window.innerWidth/2 - hash.z = rand() * 400 - hash.rotationY = rand()*30 - hash.dy = randrange(-100,-30) - 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> +<title>rain</title> +<link rel="stylesheet" type="text/css" href="app.css"> +</head> +<body> +<div id="info"></div> +<script type="text/javascript" src="app.min.js"></script> +</body> +</html> |