<!DOCTYPE html>

<html>

<head>

<title>TweenJS: CSS Tweening Example</title>

<script src="../lib/Ticker.js"></script> <!-- included for Ticker -->

<script src="../src/tweenjs/Tween.js"></script>

<script>

var colorSeed=0;

function init() {

Ticker.setFPS(20);

var count = 600;

while (--count >= 0) {

var box = document.createElement("div");

box.style.width = "6px";

box.style.height = "2px";

box.style.position = "absolute";

box.style.borderRadius = "2px";

box.style.backgroundColor = "#0F0";

box.style.opacity = "0";

document.body.appendChild(box);

var a = (Math.random()*Math.PI*2*16|0)/16;

box.style.webkitTransform = "rotate("+a+"rad)";

var d = 30;

box.style.left = window.innerWidth/2+Math.cos(a-0.2-Math.random())*d+"px";

box.style.top = window.innerHeight/2+Math.sin(a-0.2-Math.random())*d+"px";

d = (Math.min(window.innerWidth,window.innerHeight)-16)/2*(Math.random()*0.3+0.7);

var x = window.innerWidth/2+Math.cos(a)*d;

var y = window.innerHeight/2+Math.sin(a)*d;

Tween.get(box.style, {loop:true,css:true}, true).wait(Math.random()*1000+1|0).call(updateColor).to({top:y,left:x,width:16,height:4,opacity:1},Math.random()*1500+1000,easeIn);

}

// tween the base color that divs will be assigned when they start moving:

Tween.get(this,{loop:true}).to({colorSeed:360},5000);

}

function updateColor(tween) {

// grab the tween's target (the style object), and update it's color

tween._target.backgroundColor = "hsl("+(Math.random()*60+colorSeed|0)+",100%,50%)";

}

// very simple easing equation:

function easeIn(ratio) {

return ratio*ratio;

}

</script>

</head>

<body onload="init();" style="background-color:#111111"></body>

</html>