jquery - Javascript - Rotating sphere pattern with flying objects around it -


how can achieve effect www.blackbox.cool?

so far managed sphere feel doing wrong

demo

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

Popular posts from this blog

java - UnknownEntityTypeException: Unable to locate persister (Hibernate 5.0) -

python - ValueError: empty vocabulary; perhaps the documents only contain stop words -

ubuntu - collect2: fatal error: ld terminated with signal 9 [Killed] -