DIR : /home/kozerus/public_html/jkwii/js/jsdoit/tweenjs/examples/CssExample.html
/home/kozerus/public_html/jkwii/js/jsdoit/tweenjs/examples
<!DOCTYPE html>
<html>
<head>
<title>TweenJS: CSS Tweening Example</title>
<link href="../_assets/css/shared.css" rel="stylesheet" type="text/css"/>
<link href="../_assets/css/examples.css" rel="stylesheet" type="text/css"/>
<link href="../_assets/css/tweenjs.css" rel="stylesheet" type="text/css"/>
<script src="../_assets/js/examples.js" type="text/javascript"></script>
<script type="text/javascript" src="../lib/tweenjs-NEXT.combined.js"></script>
<!-- We also provide hosted minified versions of all CreateJS libraries.
http://code.createjs.com -->
<script type="text/javascript" src="../src/tweenjs/CSSPlugin.js"></script>
<!-- We also provide hosted minified versions of all CreateJS libraries.
http://code.createjs.com -->
<script id="editable">
var colorSeed = 0;
function init() {
createjs.CSSPlugin.install(createjs.Tween);
createjs.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";
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;
createjs.Tween.get(box, {loop: true}, true).set({opacity: "0"}, box.style).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:
createjs.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.style.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">
<header class="TweenJS">
<h1>CSS Plugin Example</h1>
<p>This example shows how a plugin can be used to override values in
TweenJS. The CSSPlugin ensures the CSS position and size parameters all
receive the "px" suffix required by CSS.</p>
</header>
</body>
</html>
//
koh5_pano
Drag mouse to navigate.
Navigation
- Left/Right Mouse drag: Changes camera heading.
- Up/Sown Mouse drag: Changes camera pitch.
- Scroll wheel: Changes camera field of view.
- I-Key: Displays Info panel with canvas size, image size and FPS.
17.Aug.2010, Martin Wengenmayer