SO - distributing elements on a circle

http://stackoverflow.com/questions/8436187/circular-layout-of-html-elements

by kiokotzu

HTML

<script src="http://fixedgroup.com/clients/launch/dev/wp-content/themes/launch/js/TweenMax.min.js?ver=1.9.7"></script>
<section class="tomalo">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</section>

CSS

.stage{
    width:400px;
    height:400px;
    margin:2em;
    float:left;
    position:relative;
    background:#ccc;
    overflow:hidden;
    font-weight:bold;
    text-align:center;
}

JavaScript

var elems = document.getElementsByTagName('div');
var increase = Math.PI * 2 / elems.length;
var x = 0, y = 0, angle = 0, elem;

for (var i = 0; i < elems.length; i++) {
    elem = elems[i];
    x = 150 * Math.cos(angle) + 200;
    y = 150 * Math.sin(angle) + 200;
    elem.style.position = 'absolute';
    elem.style.left = x + 'px';
    elem.style.top = y + 'px';
    angle += increase;
}

$('html,body').mousemove(function(xy) {
    winHeight = $(window).innerHeight();
    winWidth = $(window).innerWidth();
    middle = winWidth/2
    pageX = (xy.pageX); 
    pageY = (xy.pageY); 
    middle2 = pageX-middle;
    
    TweenMax.to($('section'), 1.2, {ease: Power1.easeOut, rotationY: -(middle2*0.01), transformPerspective: 3000, x: -(middle2*0.03) });
});