Minified - Getting Started LOOP

Minified Example - Shows simple element creation with add() and EE(), and MINI.loop().

by tjansen

HTML

<script src="http://minifiedjs.com/download/minified-src.js"></script>
<div id="container">
</div>

CSS

#container { position: relative; width: 300px; height: 300px; border: 1px solid black; }
.block { position: absolute; width: 30px; height: 30px; background-color: blue; }

JavaScript

var MINI = require('minified'); 
var $ = MINI.$, $$ = MINI.$$, EE = MINI.EE;
var BLOCK_NUM = 5;

$(function() {
    // Add 5 <div class="block> elements to #container
    for (var i = 0; i < BLOCK_NUM; i++)
        $('#container').add(EE('div', {$: 'block'}));

    // Animation loop to make blocks rotate
    $.loop(function(t) {
        $('.block').per(function(b, index) {
            var deg = 2*Math.PI * (t/5000 + index/BLOCK_NUM); // 5s per rotation
            b.set({$top: Math.round(135+Math.sin(deg)*120) + 'px', // center 135px, radius 200px
                   $left: Math.round(135+Math.cos(deg)*120) + 'px'});
        });
    });
});