jquery - Javascript - Rotating sphere pattern with flying objects around it -
how can achieve effect www.blackbox.cool?
so far managed sphere feel doing wrong
for reason speeds after 10 seconds , slows down , can't think of how these flying objects around sphere
$(function(){ var el = document.createelement('div'), transformprops = 'transform webkittransform moztransform otransform mstransform'.split(' '), transformprop = support(transformprops); function support(props) { for(var = 0, l = props.length; < l; i++) { if(typeof el.style[props[i]] !== "undefined") { return props[i]; } } } var $sphere = $('#sphere'), sphere = { rounds: 10, panels: 25, panelwidth: 200, el: $sphere.find('.container'), build: function(p, r) { var panels = p || this.panels, rounds = r || this.rounds, rotationperpanel = 360/panels, rotationperround = 360/2/rounds, yrotation, xrotation, width = this.panelwidth, ztranslate = (width/2) / math.tan(rotationperpanel * math.pi/180), $container = this.el, $ul, $li, i, j; this.el.html(''); for(i = 0; < rounds; i++) { $ul = $('<ul>'); xrotation = rotationperround * i; $ul[0].style[transformprop] = "rotatex("+ xrotation + "deg)"; for(j = 0; j < panels; j++) { $li = $('<li>'); yrotation = rotationperpanel * j; $li[0].style[transformprop] = "rotatey("+ yrotation +"deg) translatez("+ ztranslate +"px)"; $ul.append($li); } $container.append($ul); } } }, mouse = { start : {} }, touch = document.ontouchmove !== undefined, viewport = { x: 0, y: 0, el: $('#sphere .container')[0], move: function(coords) { if(coords) { if(typeof coords.x === "number") this.x = coords.x; if(typeof coords.y === "number") this.y = coords.y; } this.el.style[transformprop] = "rotatex("+this.x+"deg) rotatey("+this.y+"deg)"; }, reset: function() { this.move({x: 0, y: 0}); } }; sphere.build(); function start(){ viewport.move({x: viewport.x + 9, y: viewport.y + 1}); settimeout(start, 1000); } start(); $('#controls').bind('submit change', function(evt) { evt.preventdefault(); $sphere.attr('class','').addclass($(evt.target).val()); }); });
please help!
Comments
Post a Comment