DIR : /home/kozerus/public_html/jkwii/js/jsdoit/tweenjs/examples/TweenOnlyDemo.html

/home/kozerus/public_html/jkwii/js/jsdoit/tweenjs/examples

<!DOCTYPE html>
<html>
<head>
	<title>TweenJS: Simple Tween Demo</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>
	<script type="text/javascript" src="../src/tweenjs/CSSPlugin.js"></script>
	<!-- We also provide hosted minified versions of all CreateJS libraries.
		 http://code.createjs.com -->

	<!-- We also provide hosted minified versions of all CreateJS libraries.
	  http://code.createjs.com -->

	<style>
		.content {
			position: relative;
		}

		.ball {
			position: absolute;
			width: 100px;
			height: 100px;
			background-color: red;
			border-radius: 25px;
			border: 1px solid #000;
		}
	</style>

<script id="editable">
	function init() {
		createjs.CSSPlugin.install(createjs.Tween);

		var ball = document.createElement("div");
		ball.className = "ball";
		document.body.appendChild(ball);

		ball.style.left = "200px";
		ball.style.top = "100px";

		var w = 960;
		var h = 400;

		var tween = createjs.Tween.get(ball, {loop: true})
				.to({width: 100, height: 100, top: h - 55}, 1500, createjs.Ease.bounceOut)
				.wait(1000)
				.to({left: w - 55}, 2500, createjs.Ease.bounceOut)
				.wait(1000)
				.to({width: 200, height: 200, left: w - 110, top: h - 110}, 2500, createjs.Ease.bounceOut)
				.wait(1000)
				.to({width: 50, height: 50, left: 30, top: h - 30}, 2500, createjs.Ease.bounceOut)
				.wait(1000);
	}
</script>

</head>
<body onload="init()">

<div>
	<header class="EaselJS">
		<h1>Tween only Demo</h1>

		<p>This example shows TweenJS without using Canvas/EaselJS, to showcase
			legacy support for IE8.</p>
	</header>

	<div id="testCanvas" class="content"></div>
</div>

</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