DIR : /home/kozerus/public_html/pn/uize/site-source/examples/~EXPERIMENTAL-fade-style.html
/home/kozerus/public_html/pn/uize/site-source/examples
<!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>Fade Style | JavaScript Examples | UIZE JavaScript Framework</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="keywords" content="animation Uize.Fx"/>
<link rel="alternate" type="application/rss+xml" title="UIZE JavaScript Framework - Latest News" href="http://www.uize.com/latest-news.rss"/>
<link rel="stylesheet" href="../css/page.css"/>
<link rel="stylesheet" href="../css/page.example.css"/>
<link rel="stylesheet" href="../css/widget.tabs.css"/>
<link rel="stylesheet" href="css/selector-links.css"/>
<link rel="stylesheet" href="../examples/css/params-table.css"/>
<link rel="stylesheet" href="../examples/css/params-inspector.css"/>
<style type="text/css">
#page_paramsInspector_preview {
width:240px;
}
</style>
</head>
<body>
<script type="text/javascript" src="../js/Uize.js"></script>
<h1 class="header">
<a id="page-homeLink" href="../index.html" title="UIZE JavaScript Framework home"></a>
<a href="../index.html" class="homeLinkText" title="UIZE JavaScript Framework home">UIZE JavaScript Framework</a>
</h1>
<div class="main">
<h1 class="document-title">
<a href="../javascript-examples.html" class="breadcrumb breadcrumbWithArrow">JAVASCRIPT EXAMPLES</a>
Fade Style
<div class="pageActionsShell">
<div id="page-actions" class="pageActions"><a href="source-code/fade-style.html" class="buttonLink">SOURCE</a></div>
</div>
</h1>
<!-- explanation copy -->
<div class="explanation">
<p>In this example, </p>
</div>
<!-- page layout's "wireframe" with slots for demo area and params inspector -->
<table border="0" cellspacing="0" cellpadding="4" style="margin:auto;">
<tr valign="top">
<td>
<div style="position:relative; width:500px; height:357px; border:1px solid #555; background-color:#000;">
<div style="position:absolute; left:0; top:0; width:100%; height:100%; background:url(../images/uize-50x50-watermark.gif) repeat left top;"></div>
<div id="testNode" style="position:absolute; width:100px; height:100px; overflow:hidden; border:1px solid #555; color:#fff; background-color:#000;">
test node test node test node test node test node test node test node test node test node test node test node test node test node test node test node test node test node test node test node test node test node test node test node test node test node test node test node test node test node test node test node test node test node test node test node test node test node test node test node test node test node test node test node test node test node test node test node test node test node test node test node test node test node test node test node test node test node test node test node test node test node test node
</div>
</div>
</td>
<td id="page-paramsInspector"></td>
</tr>
</table>
</div>
<!-- JavaScript code to make the static wipe HTML "come alive" -->
<script type="text/javascript">
Uize.require (
[
'UizeSite.Page.Example.library',
'UizeSite.Page.Example',
'UizeSite.ParamsInspector',
'Uize.Fx'
],
function () {
'use strict';
/*** create the example page widget ***/
var page = window.page = UizeSite.Page.Example ();
/*** create the params inspector widget ***/
page.addChild (
'paramsInspector',
UizeSite.ParamsInspector,
{
params:{
startValue:'json',
endValue:'json',
duration:'integer',
fadeProperties:'json'
},
presets:{
'Shades of Red':{
startValue:null,
endValue:{color:'#f90',borderColor:'#f00',backgroundColor:'#600'},
duration:300,
fadeProperties:null
},
'Shades of Blue':{
startValue:null,
endValue:{color:'#09f',borderColor:'#00f',backgroundColor:'#006'},
duration:300,
fadeProperties:null
},
'100% Opaque':{
startValue:null,
endValue:{opacity:1},
duration:300,
fadeProperties:null
},
'50% Opaque (semi-transparent)':{
startValue:null,
endValue:{opacity:.5},
duration:300,
fadeProperties:null
},
'25% Opaque (semi-transparent)':{
startValue:null,
endValue:{opacity:.25},
duration:300,
fadeProperties:null
},
'0% Opaque (transparent)':{
startValue:null,
endValue:{opacity:0},
duration:300,
fadeProperties:null
},
'Move Down and Right, and Size':{
startValue:null,
endValue:{left:350,top:210,width:100,height:100},
duration:300,
fadeProperties:null
},
'Move Up and Left, and Size':{
startValue:null,
endValue:{left:0,top:0,width:100,height:100},
duration:300,
fadeProperties:null
},
'Border Gets Thicker (20px)':{
startValue:null,
endValue:{borderWidth:20},
duration:300,
fadeProperties:null
},
'Border Gets Thinner (1px)':{
startValue:null,
endValue:{borderWidth:1},
duration:300,
fadeProperties:null
},
'Border Gets Weird':{
startValue:null,
endValue:{borderTopColor:'#fff',borderTopWidth:20,borderRightColor:'#444',borderRightWidth:30,borderBottomColor:'#222',borderBottomWidth:40,borderLeftColor:'#aaa',borderLeftWidth:10},
duration:300,
fadeProperties:null
},
'Padding Gets Thicker (20px)':{
startValue:null,
endValue:{padding:20},
duration:300,
fadeProperties:null
},
'Padding Gets Thinner (1px)':{
startValue:null,
endValue:{padding:1},
duration:300,
fadeProperties:null
},
'Font Size Gets Huge (40px)':{
startValue:null,
endValue:{fontSize:40},
duration:300,
fadeProperties:null
},
'Font Size Gets Normal (12px)':{
startValue:null,
endValue:{fontSize:12},
duration:300,
fadeProperties:null
},
'Size to 20 x 300':{
startValue:null,
endValue:{width:20,height:300,top:0},
duration:300,
fadeProperties:null
},
'Size to 400 x 20':{
startValue:null,
endValue:{width:400,height:20,left:0},
duration:300,
fadeProperties:null
},
'Size to 100 x 100':{
startValue:null,
endValue:{width:100,height:100},
duration:300,
fadeProperties:null
},
'Size to 400 x 300':{
startValue:null,
endValue:{width:400,height:300,left:0,top:0},
duration:300,
fadeProperties:null
},
'Big Line Height':{
startValue:null,
endValue:{lineHeight:40,left:0,top:0,width:400,height:300,fontSize:12,borderWidth:20},
duration:300,
fadeProperties:null
},
'Normal Line Height':{
startValue:null,
endValue:{lineHeight:14,left:0,top:0,width:400,height:300,fontSize:12,borderWidth:20},
duration:300,
fadeProperties:null
}
},
previewButtonText:'PERFORM STYLE FADE'
}
).wire (
'Preset Selected',
function (_presetName) {
var fadeParams = page.children.paramsInspector.getValues ();
Uize.Fx.fadeStyle (
'testNode',
fadeParams.startValue,
fadeParams.endValue,
fadeParams.duration,
fadeParams.fadeProperties
);
}
);
/*** wire up the page widget ***/
page.wireUi ();
}
);
</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