removing old version of yui
This commit is contained in:
JT Smith
parent
d1d368dcd1
commit
4fd23d094f
766 changed files with 0 additions and 262230 deletions
|
|
@ -1,30 +0,0 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>Animation Example - Basic</title>
|
||||
<link rel="stylesheet" type="text/css" href="css/demo.css">
|
||||
|
||||
<script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>
|
||||
<script type="text/javascript" src="../../build/event/event.js"></script>
|
||||
<script type="text/javascript" src="../../build/dom/dom.js"></script>
|
||||
<script type="text/javascript" src="../../build/animation/animation.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
YAHOO.example.init = function() {
|
||||
var anim = new YAHOO.util.Anim('demo', { width: {to: 500} });
|
||||
YAHOO.util.Event.on(document, 'click', anim.animate, anim, true);
|
||||
};
|
||||
|
||||
YAHOO.util.Event.onAvailable('demo', YAHOO.example.init);
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body id="animation-demo-basic">
|
||||
<div id="doc">
|
||||
<h1>Animation Example - Basic</h1>
|
||||
<p>This example demonstrates how to animate an element's width to a given value.</p>
|
||||
<p>Click anywhere to start animation.</p>
|
||||
<div id="demo"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,29 +0,0 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>Animation Example - Colors</title>
|
||||
<link rel="stylesheet" type="text/css" href="css/demo.css">
|
||||
|
||||
<script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>
|
||||
<script type="text/javascript" src="../../build/event/event.js"></script>
|
||||
<script type="text/javascript" src="../../build/dom/dom.js"></script>
|
||||
<script type="text/javascript" src="../../build/animation/animation.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
YAHOO.example.init = function() {
|
||||
var anim = new YAHOO.util.Anim('demo', { width: {from: 600, to: 300} });
|
||||
YAHOO.util.Event.on(document, 'click', anim.animate, anim, true);
|
||||
};
|
||||
|
||||
YAHOO.util.Event.onAvailable('demo', YAHOO.example.init);
|
||||
</script>
|
||||
</head>
|
||||
<body id="animation-demo-from">
|
||||
<div id="doc">
|
||||
<h1>Animation Example - Colors</h1>
|
||||
<p>This example demonstrates how to animate an element's font and background color.</p>
|
||||
<p>Click anywhere to start animation.</p>
|
||||
<div id="demo"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,35 +0,0 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>Animation Example - Size</title>
|
||||
<link rel="stylesheet" type="text/css" href="css/demo.css">
|
||||
|
||||
<script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>
|
||||
<script type="text/javascript" src="../../build/event/event.js"></script>
|
||||
<script type="text/javascript" src="../../build/dom/dom.js"></script>
|
||||
<script type="text/javascript" src="../../build/animation/animation.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
YAHOO.example.init = function() {
|
||||
var attributes = {
|
||||
width: { to: 300 },
|
||||
height: { to: 300 }
|
||||
};
|
||||
|
||||
var anim = new YAHOO.util.Anim('demo', attributes, 0.5, YAHOO.util.Easing.backOut);
|
||||
YAHOO.util.Event.on(document, 'click', anim.animate, anim, true);
|
||||
};
|
||||
|
||||
YAHOO.util.Event.onAvailable('demo', YAHOO.example.init);
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body id="animation-demo-size">
|
||||
<div id="doc">
|
||||
<h1>Animation Example - Size</h1>
|
||||
<p>This example demonstrates how to animate an element's size to a given value. The backOut Easing method is used to give it some flair.</p>
|
||||
<p>Click anywhere to start animation.</p>
|
||||
<div id="demo"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,36 +0,0 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>Animation Example - Size Plus Other Attributes</title>
|
||||
<link rel="stylesheet" type="text/css" href="css/demo.css">
|
||||
|
||||
<script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>
|
||||
<script type="text/javascript" src="../../build/event/event.js"></script>
|
||||
<script type="text/javascript" src="../../build/dom/dom.js"></script>
|
||||
<script type="text/javascript" src="../../build/animation/animation.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
YAHOO.example.init = function() {
|
||||
var attributes = {
|
||||
width: {to: 100},
|
||||
height: {to: 100},
|
||||
fontSize: {from: 100, to: 50, unit: '%'},
|
||||
opacity: { to: 0.5 }
|
||||
};
|
||||
|
||||
var anim = new YAHOO.util.Anim('demo', attributes, 0.5, YAHOO.util.Easing.backOut);
|
||||
YAHOO.util.Event.on(document, 'click', anim.animate, anim, true);
|
||||
};
|
||||
|
||||
YAHOO.util.Event.onAvailable('demo', YAHOO.example.init);
|
||||
</script>
|
||||
</head>
|
||||
<body id="animation-demo-size-plus">
|
||||
<div id="doc">
|
||||
<h1>Animation Example - Size Plus Other Attributes</h1>
|
||||
<p>This example demonstrates how to animate an element's size, fontSize, and opacity to given values.</p>
|
||||
<p>Click anywhere to start animation.</p>
|
||||
<div id="demo">Lorem ipsum dolor </div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,38 +0,0 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>Animation Example - Adding Attributes to an Existing Animation</title>
|
||||
<link rel="stylesheet" type="text/css" href="css/demo.css">
|
||||
|
||||
<script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>
|
||||
<script type="text/javascript" src="../../build/event/event.js"></script>
|
||||
<script type="text/javascript" src="../../build/dom/dom.js"></script>
|
||||
<script type="text/javascript" src="../../build/animation/animation.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
YAHOO.example.init = function() {
|
||||
var attributes = {
|
||||
width: {to: 100},
|
||||
height: {to: 100}
|
||||
};
|
||||
|
||||
var anim = new YAHOO.util.Anim('demo', attributes);
|
||||
anim.attributes.fontSize = { from: 100, to: 60, unit: '%' };
|
||||
anim.attributes.opacity = { to: 0.5 };
|
||||
anim.method = YAHOO.util.Easing.elasticOut;
|
||||
|
||||
YAHOO.util.Event.on(document, 'click', anim.animate, anim, true);
|
||||
};
|
||||
|
||||
YAHOO.util.Event.onAvailable('demo', YAHOO.example.init);
|
||||
</script>
|
||||
</head>
|
||||
<body id="animation-demo-size-plus">
|
||||
<div id="doc">
|
||||
<h1>Animation Example - Adding Attributes to an Existing Animation</h1>
|
||||
<p>This example demonstrates how to animate an element's size to a given value. Other attributes are added after the instance is created in this example.</p>
|
||||
<p>Click anywhere to start animation.</p>
|
||||
<div id="demo">Lorem ipsum dolor </div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,29 +0,0 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>Animation Example - Unit</title>
|
||||
<link rel="stylesheet" type="text/css" href="css/demo.css">
|
||||
|
||||
<script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>
|
||||
<script type="text/javascript" src="../../build/event/event.js"></script>
|
||||
<script type="text/javascript" src="../../build/dom/dom.js"></script>
|
||||
<script type="text/javascript" src="../../build/animation/animation.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
YAHOO.example.init = function() {
|
||||
var anim = new YAHOO.util.Anim('demo', { width: { from: 30, to: 10, unit: 'em'} } );
|
||||
YAHOO.util.Event.on(document, 'click', anim.animate, anim, true);
|
||||
};
|
||||
|
||||
YAHOO.util.Event.onAvailable('demo', YAHOO.example.init);
|
||||
</script>
|
||||
</head>
|
||||
<body id="animation-demo-units">
|
||||
<div id="doc">
|
||||
<h1>Animation Example - Unit</h1>
|
||||
<p>This example demonstrates how to animate an element's width using "em" as the unit.</p>
|
||||
<p>Click anywhere to start animation.</p>
|
||||
<div id="demo"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,39 +0,0 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>Animation Example - Colors</title>
|
||||
<link rel="stylesheet" type="text/css" href="css/demo.css">
|
||||
|
||||
<script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>
|
||||
<script type="text/javascript" src="../../build/event/event.js"></script>
|
||||
<script type="text/javascript" src="../../build/dom/dom.js"></script>
|
||||
<script type="text/javascript" src="../../build/animation/animation.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
YAHOO.example.init = function() {
|
||||
|
||||
var attributes = {
|
||||
color: { to: '#f00' },
|
||||
backgroundColor: { to: 'rgb(0, 255, 0)' },
|
||||
borderTopColor: { to: '#dcdcdc' },
|
||||
borderRightColor: { to: 'dcdcdc' },
|
||||
borderBottomColor: { to: 'dcdcdc' },
|
||||
borderLeftColor: { to: 'dcdcdc' }
|
||||
};
|
||||
|
||||
var anim = new YAHOO.util.ColorAnim('demo', attributes);
|
||||
YAHOO.util.Event.on(document, 'click', anim.animate, anim, true);
|
||||
};
|
||||
|
||||
YAHOO.util.Event.onAvailable('demo', YAHOO.example.init);
|
||||
</script>
|
||||
</head>
|
||||
<body id="animation-demo-colors">
|
||||
<div id="doc">
|
||||
<h1>Animation Example - Colors</h1>
|
||||
<p>This example demonstrates how to animate an element's font, border, and background color.</p>
|
||||
<p>Click anywhere to start animation.</p>
|
||||
<div id="demo">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat </div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,87 +0,0 @@
|
|||
/*
|
||||
Copyright (c) 2006, Yahoo! Inc. All rights reserved.
|
||||
Code licensed under the BSD License:
|
||||
http://developer.yahoo.net/yui/license.txt
|
||||
Version: 0.10.0
|
||||
*/
|
||||
|
||||
body {
|
||||
margin:0;
|
||||
font:small arial;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color:#666;
|
||||
margin:0;
|
||||
font:bold 150% palatino, georgia;
|
||||
}
|
||||
|
||||
#hd img {
|
||||
vertical-align:middle;
|
||||
}
|
||||
|
||||
#hd h1 {
|
||||
display:inline;
|
||||
margin:0 0 0 20px;
|
||||
vertical-align:middle;
|
||||
}
|
||||
|
||||
ul, li {
|
||||
margin:0;
|
||||
padding:0;
|
||||
list-style:none;
|
||||
}
|
||||
|
||||
#doc {
|
||||
margin:10px;
|
||||
}
|
||||
|
||||
#examples {
|
||||
margin:60px 40px;
|
||||
}
|
||||
|
||||
#examples li {
|
||||
margin-bottom:1em;
|
||||
}
|
||||
|
||||
#examples li a {
|
||||
color:#666;
|
||||
font:85% verdana;
|
||||
}
|
||||
|
||||
#anim, #motion, #end {
|
||||
background:#ccc;
|
||||
width:10px;
|
||||
height:10px;
|
||||
}
|
||||
|
||||
#motion {
|
||||
color:yellow;
|
||||
font-size:0;
|
||||
}
|
||||
|
||||
#size {
|
||||
background:#ccc;
|
||||
font:100%/1.2em arial;
|
||||
width:300px;
|
||||
height:300px;
|
||||
}
|
||||
|
||||
#scroll {
|
||||
background:#ccc;
|
||||
font:100%/1.2em arial;
|
||||
width:400px;
|
||||
height:200px;
|
||||
overflow:auto;
|
||||
}
|
||||
|
||||
#scroll p {
|
||||
width:600px;
|
||||
}
|
||||
|
||||
#end {
|
||||
background:red;
|
||||
font-size:0;
|
||||
position:absolute;
|
||||
left:300px;top:300px;
|
||||
}
|
||||
|
|
@ -1,95 +0,0 @@
|
|||
/*
|
||||
Copyright (c) 2006, Yahoo! Inc. All rights reserved.
|
||||
Code licensed under the BSD License:
|
||||
http://developer.yahoo.net/yui/license.txt
|
||||
Version: 0.10.0
|
||||
*/
|
||||
|
||||
body {
|
||||
margin:0;
|
||||
font:small arial;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color:#666;
|
||||
margin:0;
|
||||
font:bold 150% palatino, georgia;
|
||||
}
|
||||
|
||||
#hd img {
|
||||
vertical-align:middle;
|
||||
}
|
||||
|
||||
#hd h1 {
|
||||
display:inline;
|
||||
margin:0 0 0 20px;
|
||||
vertical-align:middle;
|
||||
}
|
||||
|
||||
ul, li {
|
||||
margin:0;
|
||||
padding:0;
|
||||
list-style:none;
|
||||
}
|
||||
|
||||
#doc {
|
||||
margin:10px;
|
||||
}
|
||||
|
||||
#examples {
|
||||
margin:60px 40px;
|
||||
}
|
||||
|
||||
#examples li {
|
||||
margin-bottom:1em;
|
||||
}
|
||||
|
||||
#examples li a {
|
||||
color:#666;
|
||||
font:85% verdana;
|
||||
}
|
||||
|
||||
#demo {
|
||||
background:#ccc;
|
||||
font:100%/1.2em arial;
|
||||
width:10px;
|
||||
height:10px;
|
||||
}
|
||||
|
||||
#animation-demo-scroll #demo p {
|
||||
width:600px;
|
||||
}
|
||||
|
||||
#animation-demo-motion #demo {
|
||||
color:yellow;
|
||||
font-size:0;
|
||||
}
|
||||
|
||||
#animation-demo-size-plus #demo, #animation-demo-fade #demo, #animation-demo-colors #demo {
|
||||
background:#ccc;
|
||||
font:100%/1.2em arial;
|
||||
width:200px;
|
||||
height:200px;
|
||||
}
|
||||
#animation-demo-colors #demo {
|
||||
border:3px solid #c3c;
|
||||
}
|
||||
|
||||
#animation-demo-scroll #demo {
|
||||
width:400px;
|
||||
height:200px;
|
||||
overflow:auto;
|
||||
}
|
||||
|
||||
#animation-demo-colors #demo {
|
||||
|
||||
}
|
||||
|
||||
#target {
|
||||
background:red;
|
||||
font-size:0;
|
||||
position:absolute;
|
||||
left:300px;top:300px;
|
||||
width:10px;
|
||||
height:10px;
|
||||
}
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>Animation Example - Easing</title>
|
||||
<link rel="stylesheet" type="text/css" href="css/demo.css">
|
||||
|
||||
<script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>
|
||||
<script type="text/javascript" src="../../build/event/event.js"></script>
|
||||
<script type="text/javascript" src="../../build/dom/dom.js"></script>
|
||||
<script type="text/javascript" src="../../build/animation/animation.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
YAHOO.example.init = function() {
|
||||
var anim = new YAHOO.util.Anim('demo', { width: {to: 500} }, 1, YAHOO.util.Easing.bounceOut);
|
||||
YAHOO.util.Event.on(document, 'click', anim.animate, anim, true);
|
||||
};
|
||||
|
||||
YAHOO.util.Event.onAvailable('demo', YAHOO.example.init);
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body id="animation-demo-easing">
|
||||
<div id="doc">
|
||||
<h1>Animation Example - Easing</h1>
|
||||
<p>This example demonstrates how to animate an element's width to a given value with a "bounceOut" easing.</p>
|
||||
<p>Click anywhere to start animation.</p>
|
||||
<div id="demo"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,29 +0,0 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>Animation Example - Fade</title>
|
||||
<link rel="stylesheet" type="text/css" href="css/demo.css">
|
||||
|
||||
<script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>
|
||||
<script type="text/javascript" src="../../build/event/event.js"></script>
|
||||
<script type="text/javascript" src="../../build/dom/dom.js"></script>
|
||||
<script type="text/javascript" src="../../build/animation/animation.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
YAHOO.example.init = function() {
|
||||
var anim = new YAHOO.util.Anim('demo', { opacity: { to: 0 } }, 1, YAHOO.util.Easing.easeOut);
|
||||
YAHOO.util.Event.on(document, 'click', anim.animate, anim, true);
|
||||
};
|
||||
|
||||
YAHOO.util.Event.onAvailable('demo', YAHOO.example.init);
|
||||
</script>
|
||||
</head>
|
||||
<body id="animation-demo-fade">
|
||||
<div id="doc">
|
||||
<h1>Animation Example - Fade</h1>
|
||||
<p>This example demonstrates how to animate an element's opacity to a given value.</p>
|
||||
<p>Click anywhere to start animation.</p>
|
||||
<div id="demo">Lorem ipsum dolor </div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 705 B |
|
|
@ -1,38 +0,0 @@
|
|||
<!doctype html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>YUI Library - Animation</title>
|
||||
<link rel="stylesheet" type="text/css" media="screen" href="css/demo.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="doc">
|
||||
<div id="hd">
|
||||
<img src="img/logo.gif">
|
||||
<h1>YUI Library - Animation</h1>
|
||||
</div>
|
||||
<div id="bd">
|
||||
<ul id="examples">
|
||||
<li><a href="anim_basic.html">Basic Animation</a></li>
|
||||
<li><a href="easing.html">Using Easing</a></li>
|
||||
<li><a href="anim_from.html">Using From</a></li>
|
||||
|
||||
<li><a href="anim_units.html">From in EM units</a></li>
|
||||
<li><a href="anim_size.html">Size</a></li>
|
||||
<li><a href="anim_size_plus.html">Size and other Attributes</a></li>
|
||||
<li><a href="anim_size_plus_alt.html">Adding Attributes to Existing Animation</a></li>
|
||||
<li><a href="fade.html">Fade</a></li>
|
||||
<li><a href="colors.html">Animating Colors</a></li>
|
||||
<li><a href="motion_basic.html">Simple Movement</a></li>
|
||||
|
||||
<li><a href="motion_by.html">Relative Movement</a></li>
|
||||
<li><a href="motion_control.html">Motion Using a Control Point</a></li>
|
||||
<li><a href="motion_controls.html">Motion Using Multiple Control Points</a></li>
|
||||
<li><a href="motion_plus.html">Motion and Animation</a></li>
|
||||
<li><a href="scroll_horiz.html">Horizontal Scrolling</a></li>
|
||||
<li><a href="scroll_vert.html">Vertical Scrolling</a></li>
|
||||
<li><a href="scroll_by.html">Relative Scrolling</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>Motion Example - Basic</title>
|
||||
<link rel="stylesheet" type="text/css" href="css/demo.css">
|
||||
|
||||
<script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>
|
||||
<script type="text/javascript" src="../../build/event/event.js"></script>
|
||||
<script type="text/javascript" src="../../build/dom/dom.js"></script>
|
||||
<script type="text/javascript" src="../../build/animation/animation.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
YAHOO.example.init = function() {
|
||||
var anim = new YAHOO.util.Motion('demo', { points: { to: YAHOO.util.Dom.getXY('target') } });
|
||||
YAHOO.util.Event.on(document, 'click', anim.animate, anim, true);
|
||||
};
|
||||
|
||||
YAHOO.util.Event.onAvailable('demo', YAHOO.example.init);
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body id="animation-demo-motion">
|
||||
<div id="doc">
|
||||
<h1>Motion Example - Basic</h1>
|
||||
<p>This example demonstrates how to animate an element's position using the Motion subclass.</p>
|
||||
<p>Click anywhere to start animation.</p>
|
||||
<div id="demo"></div>
|
||||
<div id="target"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>Motion Example - Relative Motion</title>
|
||||
<link rel="stylesheet" type="text/css" href="css/demo.css">
|
||||
|
||||
<script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>
|
||||
<script type="text/javascript" src="../../build/event/event.js"></script>
|
||||
<script type="text/javascript" src="../../build/dom/dom.js"></script>
|
||||
<script type="text/javascript" src="../../build/animation/animation.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
YAHOO.example.init = function() {
|
||||
var anim = new YAHOO.util.Motion('demo', { points: { by: [300, 0] } });
|
||||
YAHOO.util.Event.on(document, 'click', anim.animate, anim, true);
|
||||
};
|
||||
|
||||
YAHOO.util.Event.onAvailable('demo', YAHOO.example.init);
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body id="animation-demo-motion">
|
||||
<div id="doc">
|
||||
<h1>Motion Example - Relative Motion</h1>
|
||||
<p>This example demonstrates how to animate an element's position from its current position by a given value.</p>
|
||||
<p>Click anywhere to start animation.</p>
|
||||
<div id="demo"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,38 +0,0 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>Motion Example - Using a Control Point</title>
|
||||
<link rel="stylesheet" type="text/css" href="css/demo.css">
|
||||
|
||||
<script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>
|
||||
<script type="text/javascript" src="../../build/event/event.js"></script>
|
||||
<script type="text/javascript" src="../../build/dom/dom.js"></script>
|
||||
<script type="text/javascript" src="../../build/animation/animation.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
YAHOO.example.init = function() {
|
||||
var attributes = {
|
||||
points: {
|
||||
to: YAHOO.util.Dom.getXY('target'),
|
||||
control: [100, 800]
|
||||
}
|
||||
};
|
||||
|
||||
var anim = new YAHOO.util.Motion('demo', attributes, 1, YAHOO.util.Easing.bounceOut);
|
||||
YAHOO.util.Event.on(document, 'click', anim.animate, anim, true);
|
||||
};
|
||||
|
||||
YAHOO.util.Event.onAvailable('demo', YAHOO.example.init);
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body id="animation-demo-motion">
|
||||
<div id="doc">
|
||||
<h1>Motion Example - Using a Control Point</h1>
|
||||
<p>This example demonstrates how to animate an element's position with a control point to create a curved path.</p>
|
||||
<p>Click anywhere to start animation.</p>
|
||||
<div id="demo"></div>
|
||||
<div id="target"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,39 +0,0 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>Motion Example - Using Multiple Control Points</title>
|
||||
<link rel="stylesheet" type="text/css" href="css/demo.css">
|
||||
|
||||
<script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>
|
||||
<script type="text/javascript" src="../../build/event/event.js"></script>
|
||||
<script type="text/javascript" src="../../build/dom/dom.js"></script>
|
||||
<script type="text/javascript" src="../../build/animation/animation.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
YAHOO.example.init = function() {
|
||||
var attributes = {
|
||||
points: {
|
||||
to: YAHOO.util.Dom.getXY('target'),
|
||||
control: [ [100, 800], [0, 200], [500, 500] ]
|
||||
}
|
||||
};
|
||||
|
||||
var anim = new YAHOO.util.Motion('demo', attributes, 1, YAHOO.util.Easing.easeOut);
|
||||
YAHOO.util.Event.on(document, 'click', anim.animate, anim, true);
|
||||
};
|
||||
|
||||
YAHOO.util.Event.onAvailable('demo', YAHOO.example.init);
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body id="animation-demo-motion">
|
||||
<div id="doc">
|
||||
<h1>Motion Example - Using Multiple Control Points</h1>
|
||||
<p>This example demonstrates how to animate an element's position with multiple control points to create a curved path.</p>
|
||||
<p> Any number of control points may be used, but keep in mind that the more control points, the more work the animation has to do, so performance may suffer.</p>
|
||||
<p>Click anywhere to start animation.</p>
|
||||
<div id="demo"></div>
|
||||
<div id="target"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,40 +0,0 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>Motion Example - With Additional Attributes</title>
|
||||
<link rel="stylesheet" type="text/css" href="css/demo.css">
|
||||
|
||||
<script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>
|
||||
<script type="text/javascript" src="../../build/event/event.js"></script>
|
||||
<script type="text/javascript" src="../../build/dom/dom.js"></script>
|
||||
<script type="text/javascript" src="../../build/animation/animation.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
YAHOO.example.init = function() {
|
||||
var attributes = {
|
||||
points: {
|
||||
to: YAHOO.util.Dom.getXY('target'),
|
||||
control: [ [400, 800], [-100, 200] ]
|
||||
},
|
||||
width: {by: 100},
|
||||
height: {by: 100}
|
||||
};
|
||||
|
||||
var anim = new YAHOO.util.Motion('demo', attributes, 1, YAHOO.util.Easing.easeOut);
|
||||
YAHOO.util.Event.on(document, 'click', anim.animate, anim, true);
|
||||
};
|
||||
|
||||
YAHOO.util.Event.onAvailable('demo', YAHOO.example.init);
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body id="animation-demo-motion">
|
||||
<div id="doc">
|
||||
<h1>Motion Example - With Additional Attributes</h1>
|
||||
<p>This example demonstrates how to animate an element's position and size together.</p>
|
||||
<p>Click anywhere to start animation.</p>
|
||||
<div id="demo"></div>
|
||||
<div id="target"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>Scroll Example - Scroll By</title>
|
||||
<link rel="stylesheet" type="text/css" href="css/demo.css">
|
||||
|
||||
<script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>
|
||||
<script type="text/javascript" src="../../build/event/event.js"></script>
|
||||
<script type="text/javascript" src="../../build/dom/dom.js"></script>
|
||||
<script type="text/javascript" src="../../build/animation/animation.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
YAHOO.example.init = function() {
|
||||
var anim = new YAHOO.util.Scroll('demo', { scroll: { by: [100, 0] } });
|
||||
YAHOO.util.Event.on(document, 'click', anim.animate, anim, true);
|
||||
};
|
||||
|
||||
YAHOO.util.Event.onAvailable('demo', YAHOO.example.init);
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body id="animation-demo-scroll">
|
||||
<div id="doc">
|
||||
<h1>Scroll Example - Scroll By</h1>
|
||||
<p>This example demonstrates how to animate an element's horizontal scroll position using the Scroll subclass, using the <strong><em>by</em></strong> property of the scroll attribute.</p>
|
||||
<p>Click anywhere to start animation.</p>
|
||||
<div id="demo"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto </p></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,34 +0,0 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>Scroll Example - Horizontal</title>
|
||||
<link rel="stylesheet" type="text/css" href="css/demo.css">
|
||||
|
||||
<script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>
|
||||
<script type="text/javascript" src="../../build/event/event.js"></script>
|
||||
<script type="text/javascript" src="../../build/dom/dom.js"></script>
|
||||
<script type="text/javascript" src="../../build/animation/animation.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
YAHOO.example.init = function() {
|
||||
var attributes = {
|
||||
scroll: { to: [200, YAHOO.util.Dom.get('demo').scrollTop] }
|
||||
};
|
||||
|
||||
var anim = new YAHOO.util.Scroll('demo', attributes, 1, YAHOO.util.Easing.easeOut);
|
||||
YAHOO.util.Event.on(document, 'click', anim.animate, anim, true);
|
||||
};
|
||||
|
||||
YAHOO.util.Event.onAvailable('demo', YAHOO.example.init);
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body id="animation-demo-scroll">
|
||||
<div id="doc">
|
||||
<h1>Scroll Example - Horizontal</h1>
|
||||
<p>This example demonstrates how to animate an element's horizontal scroll position using the Scroll subclass.</p>
|
||||
<p>Click anywhere to start animation.</p>
|
||||
<div id="demo"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto </p></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,34 +0,0 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>Scroll Example - Vertical</title>
|
||||
<link rel="stylesheet" type="text/css" href="css/demo.css">
|
||||
|
||||
<script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>
|
||||
<script type="text/javascript" src="../../build/event/event.js"></script>
|
||||
<script type="text/javascript" src="../../build/dom/dom.js"></script>
|
||||
<script type="text/javascript" src="../../build/animation/animation.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
YAHOO.example.init = function() {
|
||||
var attributes = {
|
||||
scroll: { to: [YAHOO.util.Dom.get('demo').scrollLeft, 200] }
|
||||
};
|
||||
|
||||
var anim = new YAHOO.util.Scroll('demo', attributes);
|
||||
YAHOO.util.Event.on(document, 'click', anim.animate, anim, true);
|
||||
};
|
||||
|
||||
YAHOO.util.Event.onAvailable('demo', YAHOO.example.init);
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body id="animation-demo-scroll">
|
||||
<div id="doc">
|
||||
<h1>Scroll Example - Vertical</h1>
|
||||
<p>This example demonstrates how to animate an element's vertical scroll position using the Scroll subclass.</p>
|
||||
<p>Click anywhere to start animation.</p>
|
||||
<div id="demo"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto </p></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue