DIR : /home/kozerus/public_html/pn/uize/site-source/HELLO-WORLD.html

/home/kozerus/public_html/pn/uize/site-source

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>HELLO, WORLD!</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	<style type="text/css">
		body {
			background:#000;
		}
		.helloWorld {
			margin:auto;
			width:900px;
			margin-top:250px;
			opacity:0;
			filter:alpha(opacity=0);
		}
		.helloWorld div {
			font-family:times;
			font-size:50px;
			font-weight:bold;
			color:#333;
			float:left;
			text-align:center;
			width:75px;
			height:75px;
			line-height:60px;
		}
		.callToAction {
			font-family:Arial;
			font-size:12px;
			color:#555;
			width:100%;
			text-align:center;
			letter-spacing:3px;
			clear:left;
		}
	</style>
	<script type="text/javascript" src="js/Uize.js"></script>
</head>

<body>

<!-- HTML for the "HELLO, WORLD!" text -->

<div id="helloWorld" class="helloWorld">
	<div>H</div>
	<div>E</div>
	<div>L</div>
	<div>L</div>
	<div>O</div>
	<div>,</div>
	<div>W</div>
	<div>O</div>
	<div>R</div>
	<div>L</div>
	<div>D</div>
	<div>!</div>
</div>
<div class="callToAction">( you can also mouseover the individual letters above for more interactive fun )</div>

<!-- JavaScript code to wire up the hello world hover fader -->

<script type="text/javascript">

Uize.require (
	[
		'Uize.Widget.HoverFader',
		'Uize.Curve.Rubber'
	],
	function () {
		'use strict';

		/*** create the hover fader child widget ***/
			var hoverFader = Uize.Widget.HoverFader ({
				nodes:{root:'helloWorld',tagName:'div'},
				defaultStyle:{color:'#3',fontSize:50,textIndent:0},
				hoverStyle:{color:'#ffa200',fontSize:100,textIndent:-15},
				fadeIn:{duration:2000,curve:Uize.Curve.Rubber.easeOutElastic (.12)},
				fadeOut:{duration:1500,curve:Uize.Curve.Rubber.easeOutBounce (4,1.5,1.3)}
			});

		/*** wire up the hover fader widget ***/
			hoverFader.wireUi ();

		/*** "tickle" the hover fader ***/
			Uize.Fx.fadeStyle ('helloWorld',{opacity:0},{opacity:1},2000);
			setTimeout (function () {hoverFader.tickle (50)},2500);
	}
);

</script>

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