upgrade to yui 2.5.1
This commit is contained in:
JT Smith
parent
e00050ad1c
commit
ff7d72becc
1632 changed files with 812103 additions and 0 deletions
322
www/extras/yui/examples/animation/anim-chaining.html
Normal file
322
www/extras/yui/examples/animation/anim-chaining.html
Normal file
File diff suppressed because one or more lines are too long
131
www/extras/yui/examples/animation/anim-chaining_clean.html
Normal file
131
www/extras/yui/examples/animation/anim-chaining_clean.html
Normal file
|
|
@ -0,0 +1,131 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<title>Chaining Animations Using <code>onComplete</code></title>
|
||||
|
||||
<style type="text/css">
|
||||
/*margin and padding on body element
|
||||
can introduce errors in determining
|
||||
element position and are not recommended;
|
||||
we turn them off as a foundation for YUI
|
||||
CSS treatments. */
|
||||
body {
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../../build/button/assets/skins/sam/button.css" />
|
||||
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
|
||||
<script type="text/javascript" src="../../build/animation/animation-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/element/element-beta-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/button/button-min.js"></script>
|
||||
|
||||
|
||||
<!--begin custom header content for this example-->
|
||||
<style type="text/css">
|
||||
|
||||
#animator {
|
||||
background-color:#003366;
|
||||
color:#fff;
|
||||
height:15em;
|
||||
width: 15em;
|
||||
position:relative;
|
||||
margin:1em;
|
||||
padding:1em;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
<!--end custom header content for this example-->
|
||||
|
||||
</head>
|
||||
|
||||
<body class=" yui-skin-sam">
|
||||
|
||||
<h1>Chaining Animations Using <code>onComplete</code></h1>
|
||||
|
||||
<div class="exampleIntro">
|
||||
<p>A common use case for animation involves causing two or more animations to fire sequentially. This is known as <em>chaining</em>. It's easy to chain animations using the <a href="http://developer.yahoo.com/yui/animation/">YUI Animation Utility</a>'s custom events.</p>
|
||||
|
||||
<p>In this example, a color animation is set to fire <em>after</em> an animation of position. Click the button below to start the sequence.</p>
|
||||
</div>
|
||||
|
||||
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
<!--markup for YUI Button Control-->
|
||||
<span id="startAnim" class="yui-button yui-link-button">
|
||||
<em class="first-child">
|
||||
<a href="#" title="Click here to begin the chained animations.">Click here to begin the chained animations.</a>
|
||||
</em>
|
||||
</span>
|
||||
|
||||
<!--The animated element.-->
|
||||
<div id="animator">
|
||||
This element will animate position
|
||||
and then color when you click the
|
||||
button.
|
||||
</div>
|
||||
|
||||
<script language="javascript">
|
||||
|
||||
//Setup the example once the animator div is present
|
||||
//in the DOM.
|
||||
YAHOO.util.Event.onAvailable("animator", function() {
|
||||
|
||||
//This is the first animation; this one will
|
||||
//fire when the button is clicked.
|
||||
var move = new YAHOO.util.Anim("animator", {
|
||||
left: {from:0, to:75}
|
||||
}, 1);
|
||||
|
||||
//This is the second animation; it will fire
|
||||
//when the first animation is complete.
|
||||
var changeColor = new YAHOO.util.ColorAnim("animator", {
|
||||
backgroundColor: {from:"#003366", to:"#ff0000"}
|
||||
}, 1);
|
||||
|
||||
//Here's the chaining glue: We subscribe to the
|
||||
//first animation's onComplete event, and in
|
||||
//our handler we animate the second animation:
|
||||
move.onComplete.subscribe(function() {
|
||||
changeColor.animate();
|
||||
});
|
||||
|
||||
//Here we set up our YUI Button and subcribe to
|
||||
//its click event. When clicked, it will
|
||||
//animate the first animation:
|
||||
var startAnim = new YAHOO.widget.Button("startAnim");
|
||||
startAnim.subscribe("click", function() {
|
||||
//reset the color value to the start so that
|
||||
//the animation can be run multiple times:
|
||||
YAHOO.util.Dom.setStyle("animator", "backgroundColor", "#003366");
|
||||
move.animate();
|
||||
});
|
||||
|
||||
//You can also make use of the onStart and onTween
|
||||
//custom events in Animation; here, we'll log all
|
||||
//of changeColor's custom events and peek at their
|
||||
//argument signatures:
|
||||
changeColor.onStart.subscribe(function() {
|
||||
YAHOO.log("changeColor animation is starting.", "info", "example");
|
||||
});
|
||||
|
||||
changeColor.onTween.subscribe(function(s, o) {
|
||||
YAHOO.log("changeColor onTween firing with these arguments: " +
|
||||
YAHOO.lang.dump(o), "info", "example");
|
||||
});
|
||||
|
||||
changeColor.onComplete.subscribe(function(s, o) {
|
||||
YAHOO.log("changeColor onComplete firing with these arguments: " +
|
||||
YAHOO.lang.dump(o), "info", "example");
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
326
www/extras/yui/examples/animation/anim-chaining_log.html
Normal file
326
www/extras/yui/examples/animation/anim-chaining_log.html
Normal file
File diff suppressed because one or more lines are too long
209
www/extras/yui/examples/animation/attributes.html
Normal file
209
www/extras/yui/examples/animation/attributes.html
Normal file
File diff suppressed because one or more lines are too long
72
www/extras/yui/examples/animation/attributes_clean.html
Normal file
72
www/extras/yui/examples/animation/attributes_clean.html
Normal file
|
|
@ -0,0 +1,72 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<title>Animating Multiple Attributes</title>
|
||||
|
||||
<style type="text/css">
|
||||
/*margin and padding on body element
|
||||
can introduce errors in determining
|
||||
element position and are not recommended;
|
||||
we turn them off as a foundation for YUI
|
||||
CSS treatments. */
|
||||
body {
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
|
||||
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
|
||||
<script type="text/javascript" src="../../build/animation/animation-min.js"></script>
|
||||
|
||||
|
||||
<!--begin custom header content for this example-->
|
||||
<style type="text/css">
|
||||
#demo {
|
||||
background:#ccc;
|
||||
margin-bottom:1em;
|
||||
height:100px;
|
||||
width:100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!--end custom header content for this example-->
|
||||
|
||||
</head>
|
||||
|
||||
<body class=" yui-skin-sam">
|
||||
|
||||
<h1>Animating Multiple Attributes</h1>
|
||||
|
||||
<div class="exampleIntro">
|
||||
<p>This demonstrates how to animate multiple attributes of an HTMLElement using the YUI Animation Utility. Click the button to begin the demo.</p>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
<div id="demo">Demo</div>
|
||||
<button id="demo-run">run</button>
|
||||
|
||||
<script type="text/javascript">
|
||||
(function() {
|
||||
var attributes = {
|
||||
height: { to: 50 },
|
||||
width: { to: 50 }
|
||||
};
|
||||
var anim = new YAHOO.util.Anim('demo', attributes);
|
||||
|
||||
YAHOO.util.Event.on('demo-run', 'click', function() {
|
||||
anim.animate();
|
||||
});
|
||||
|
||||
YAHOO.log("The example has finished loading; as you interact with it, you'll see log messages appearing here.", "info", "example");
|
||||
})();
|
||||
</script>
|
||||
|
||||
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
207
www/extras/yui/examples/animation/basic.html
Normal file
207
www/extras/yui/examples/animation/basic.html
Normal file
File diff suppressed because one or more lines are too long
72
www/extras/yui/examples/animation/basic_clean.html
Normal file
72
www/extras/yui/examples/animation/basic_clean.html
Normal file
|
|
@ -0,0 +1,72 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<title>Basic Animation</title>
|
||||
|
||||
<style type="text/css">
|
||||
/*margin and padding on body element
|
||||
can introduce errors in determining
|
||||
element position and are not recommended;
|
||||
we turn them off as a foundation for YUI
|
||||
CSS treatments. */
|
||||
body {
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
|
||||
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
|
||||
<script type="text/javascript" src="../../build/animation/animation-min.js"></script>
|
||||
|
||||
|
||||
<!--begin custom header content for this example-->
|
||||
<style type="text/css">
|
||||
#demo {
|
||||
background:#ccc;
|
||||
margin-bottom:1em;
|
||||
overflow:hidden;
|
||||
width:200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<!--end custom header content for this example-->
|
||||
|
||||
</head>
|
||||
|
||||
<body class=" yui-skin-sam">
|
||||
|
||||
<h1>Basic Animation</h1>
|
||||
|
||||
<div class="exampleIntro">
|
||||
<p>This demonstrates how to apply a simple animation effect to an HTMLElement. Click the button to begin the demo.</p>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
<div id="demo">Demo</div>
|
||||
<button id="demo-run">run</button>
|
||||
|
||||
<script type="text/javascript">
|
||||
(function() {
|
||||
var attributes = {
|
||||
width: { to: 0 }
|
||||
};
|
||||
var anim = new YAHOO.util.Anim('demo', attributes);
|
||||
|
||||
YAHOO.util.Event.on('demo-run', 'click', function() {
|
||||
anim.animate();
|
||||
});
|
||||
|
||||
YAHOO.log("The example has finished loading; as you interact with it, you'll see log messages appearing here.", "info", "example");
|
||||
})();
|
||||
</script>
|
||||
|
||||
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
207
www/extras/yui/examples/animation/colors.html
Normal file
207
www/extras/yui/examples/animation/colors.html
Normal file
File diff suppressed because one or more lines are too long
71
www/extras/yui/examples/animation/colors_clean.html
Normal file
71
www/extras/yui/examples/animation/colors_clean.html
Normal file
|
|
@ -0,0 +1,71 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<title>Animating Colors</title>
|
||||
|
||||
<style type="text/css">
|
||||
/*margin and padding on body element
|
||||
can introduce errors in determining
|
||||
element position and are not recommended;
|
||||
we turn them off as a foundation for YUI
|
||||
CSS treatments. */
|
||||
body {
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
|
||||
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
|
||||
<script type="text/javascript" src="../../build/animation/animation-min.js"></script>
|
||||
|
||||
|
||||
<!--begin custom header content for this example-->
|
||||
<style type="text/css">
|
||||
#demo {
|
||||
background:#ccc;
|
||||
margin-bottom:1em;
|
||||
height:100px;
|
||||
width:100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!--end custom header content for this example-->
|
||||
|
||||
</head>
|
||||
|
||||
<body class=" yui-skin-sam">
|
||||
|
||||
<h1>Animating Colors</h1>
|
||||
|
||||
<div class="exampleIntro">
|
||||
<p>This demonstrates how to use the YUI Animation to animate colors. Click the button to begin the demo.</p>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
<div id="demo">Demo</div>
|
||||
<button id="demo-run">run</button>
|
||||
<script type="text/javascript">
|
||||
(function() {
|
||||
var attributes = {
|
||||
color: { to: '#06e' },
|
||||
backgroundColor: { to: '#e06' }
|
||||
};
|
||||
var anim = new YAHOO.util.ColorAnim('demo', attributes);
|
||||
|
||||
YAHOO.util.Event.on(document, 'click', function() {
|
||||
anim.animate();
|
||||
});
|
||||
|
||||
YAHOO.log("The example has finished loading; as you interact with it, you'll see log messages appearing here.", "info", "example");
|
||||
})();
|
||||
</script>
|
||||
|
||||
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
205
www/extras/yui/examples/animation/control.html
Normal file
205
www/extras/yui/examples/animation/control.html
Normal file
File diff suppressed because one or more lines are too long
71
www/extras/yui/examples/animation/control_clean.html
Normal file
71
www/extras/yui/examples/animation/control_clean.html
Normal file
|
|
@ -0,0 +1,71 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<title>Animating Along a Curved Path</title>
|
||||
|
||||
<style type="text/css">
|
||||
/*margin and padding on body element
|
||||
can introduce errors in determining
|
||||
element position and are not recommended;
|
||||
we turn them off as a foundation for YUI
|
||||
CSS treatments. */
|
||||
body {
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
|
||||
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
|
||||
<script type="text/javascript" src="../../build/animation/animation-min.js"></script>
|
||||
|
||||
|
||||
<!--begin custom header content for this example-->
|
||||
<style type="text/css">
|
||||
#demo {
|
||||
background:#ccc;
|
||||
margin-bottom:1em;
|
||||
height:30px;
|
||||
width:30px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!--end custom header content for this example-->
|
||||
|
||||
</head>
|
||||
|
||||
<body class=" yui-skin-sam">
|
||||
|
||||
<h1>Animating Along a Curved Path</h1>
|
||||
|
||||
<div class="exampleIntro">
|
||||
<p>This demonstrates how to use the YUI Animation to animate along a curved path. Click the button to begin the demo.</p>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
<div id="demo"></div>
|
||||
<button id="demo-run">run</button>
|
||||
|
||||
<script type="text/javascript">
|
||||
(function() {
|
||||
var attributes = {
|
||||
points: { to: [600, 10], control: [ [300, 100], [800, 800] ] }
|
||||
};
|
||||
var anim = new YAHOO.util.Motion('demo', attributes);
|
||||
|
||||
YAHOO.util.Event.on('demo-run', 'click', function() {
|
||||
anim.animate();
|
||||
});
|
||||
|
||||
YAHOO.log("The example has finished loading; as you interact with it, you'll see log messages appearing here.", "info", "example");
|
||||
})();
|
||||
</script>
|
||||
|
||||
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
207
www/extras/yui/examples/animation/easing.html
Normal file
207
www/extras/yui/examples/animation/easing.html
Normal file
File diff suppressed because one or more lines are too long
71
www/extras/yui/examples/animation/easing_clean.html
Normal file
71
www/extras/yui/examples/animation/easing_clean.html
Normal file
|
|
@ -0,0 +1,71 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<title>Animation Easing</title>
|
||||
|
||||
<style type="text/css">
|
||||
/*margin and padding on body element
|
||||
can introduce errors in determining
|
||||
element position and are not recommended;
|
||||
we turn them off as a foundation for YUI
|
||||
CSS treatments. */
|
||||
body {
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
|
||||
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
|
||||
<script type="text/javascript" src="../../build/animation/animation-min.js"></script>
|
||||
|
||||
|
||||
<!--begin custom header content for this example-->
|
||||
<style type="text/css">
|
||||
#demo {
|
||||
background:#ccc;
|
||||
margin-bottom:1em;
|
||||
overflow:hidden;
|
||||
width:200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!--end custom header content for this example-->
|
||||
|
||||
</head>
|
||||
|
||||
<body class=" yui-skin-sam">
|
||||
|
||||
<h1>Animation Easing</h1>
|
||||
|
||||
<div class="exampleIntro">
|
||||
<p>This demonstrates how to apply an Easing to a YUI Animation instance. Click the button to begin the demo.</p>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
<div id="demo">Demo</div>
|
||||
<button id="demo-run">run</button>
|
||||
|
||||
<script type="text/javascript">
|
||||
(function() {
|
||||
var attributes = {
|
||||
width: { to: 0 }
|
||||
};
|
||||
var anim = new YAHOO.util.Anim('demo', attributes, 1.5, YAHOO.util.Easing.backIn);
|
||||
|
||||
YAHOO.util.Event.on('demo-run', 'click', function() {
|
||||
anim.animate();
|
||||
});
|
||||
|
||||
YAHOO.log("The example has finished loading; as you interact with it, you'll see log messages appearing here.", "info", "example");
|
||||
})();
|
||||
</script>
|
||||
|
||||
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
207
www/extras/yui/examples/animation/from.html
Normal file
207
www/extras/yui/examples/animation/from.html
Normal file
File diff suppressed because one or more lines are too long
71
www/extras/yui/examples/animation/from_clean.html
Normal file
71
www/extras/yui/examples/animation/from_clean.html
Normal file
|
|
@ -0,0 +1,71 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<title>Animating From a Given Value</title>
|
||||
|
||||
<style type="text/css">
|
||||
/*margin and padding on body element
|
||||
can introduce errors in determining
|
||||
element position and are not recommended;
|
||||
we turn them off as a foundation for YUI
|
||||
CSS treatments. */
|
||||
body {
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
|
||||
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
|
||||
<script type="text/javascript" src="../../build/animation/animation-min.js"></script>
|
||||
|
||||
|
||||
<!--begin custom header content for this example-->
|
||||
<style type="text/css">
|
||||
#demo {
|
||||
background:#ccc;
|
||||
margin-bottom:1em;
|
||||
overflow:hidden;
|
||||
width:200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!--end custom header content for this example-->
|
||||
|
||||
</head>
|
||||
|
||||
<body class=" yui-skin-sam">
|
||||
|
||||
<h1>Animating From a Given Value</h1>
|
||||
|
||||
<div class="exampleIntro">
|
||||
<p>This demonstrates how to start a YUI Animation from a given value. Click the button to begin the demo.</p>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
<div id="demo">Demo</div>
|
||||
<button id="demo-run">run</button>
|
||||
|
||||
<script type="text/javascript">
|
||||
(function() {
|
||||
var attributes = {
|
||||
width: { from: 600, to: 0 }
|
||||
};
|
||||
var anim = new YAHOO.util.Anim('demo', attributes);
|
||||
|
||||
YAHOO.util.Event.on('demo-run', 'click', function() {
|
||||
anim.animate();
|
||||
});
|
||||
|
||||
YAHOO.log("The example has finished loading; as you interact with it, you'll see log messages appearing here.", "info", "example");
|
||||
})();
|
||||
</script>
|
||||
|
||||
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
86
www/extras/yui/examples/animation/index.html
Normal file
86
www/extras/yui/examples/animation/index.html
Normal file
File diff suppressed because one or more lines are too long
207
www/extras/yui/examples/animation/motion.html
Normal file
207
www/extras/yui/examples/animation/motion.html
Normal file
File diff suppressed because one or more lines are too long
71
www/extras/yui/examples/animation/motion_clean.html
Normal file
71
www/extras/yui/examples/animation/motion_clean.html
Normal file
|
|
@ -0,0 +1,71 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<title>Animating Motion</title>
|
||||
|
||||
<style type="text/css">
|
||||
/*margin and padding on body element
|
||||
can introduce errors in determining
|
||||
element position and are not recommended;
|
||||
we turn them off as a foundation for YUI
|
||||
CSS treatments. */
|
||||
body {
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
|
||||
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
|
||||
<script type="text/javascript" src="../../build/animation/animation-min.js"></script>
|
||||
|
||||
|
||||
<!--begin custom header content for this example-->
|
||||
<style type="text/css">
|
||||
#demo {
|
||||
background:#ccc;
|
||||
margin-bottom:1em;
|
||||
height:30px;
|
||||
width:30px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!--end custom header content for this example-->
|
||||
|
||||
</head>
|
||||
|
||||
<body class=" yui-skin-sam">
|
||||
|
||||
<h1>Animating Motion</h1>
|
||||
|
||||
<div class="exampleIntro">
|
||||
<p>This demonstrates how to use the YUI Animation to animate the motion of an HTMLElement. Click the button to begin the demo.</p>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
<div id="demo"></div>
|
||||
<button id="demo-run">run</button>
|
||||
|
||||
<script type="text/javascript">
|
||||
(function() {
|
||||
var attributes = {
|
||||
points: { to: [600, 10] }
|
||||
};
|
||||
var anim = new YAHOO.util.Motion('demo', attributes);
|
||||
|
||||
YAHOO.util.Event.on('demo-run', 'click', function() {
|
||||
anim.animate();
|
||||
});
|
||||
|
||||
YAHOO.log("The example has finished loading; as you interact with it, you'll see log messages appearing here.", "info", "example");
|
||||
})();
|
||||
</script>
|
||||
|
||||
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
217
www/extras/yui/examples/animation/scroll.html
Normal file
217
www/extras/yui/examples/animation/scroll.html
Normal file
File diff suppressed because one or more lines are too long
80
www/extras/yui/examples/animation/scroll_clean.html
Normal file
80
www/extras/yui/examples/animation/scroll_clean.html
Normal file
|
|
@ -0,0 +1,80 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<title>Animated Scrolling</title>
|
||||
|
||||
<style type="text/css">
|
||||
/*margin and padding on body element
|
||||
can introduce errors in determining
|
||||
element position and are not recommended;
|
||||
we turn them off as a foundation for YUI
|
||||
CSS treatments. */
|
||||
body {
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
|
||||
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
|
||||
<script type="text/javascript" src="../../build/animation/animation-min.js"></script>
|
||||
|
||||
|
||||
<!--begin custom header content for this example-->
|
||||
<style type="text/css">
|
||||
#demo {
|
||||
height:6em;
|
||||
width:20em;
|
||||
overflow:auto;
|
||||
margin-bottom:1em;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!--end custom header content for this example-->
|
||||
|
||||
</head>
|
||||
|
||||
<body class=" yui-skin-sam">
|
||||
|
||||
<h1>Animated Scrolling</h1>
|
||||
|
||||
<div class="exampleIntro">
|
||||
<p>This demonstrates how to use the YUI Animation to animate the scrolling of an HTMLElement. Click the button to begin the demo.</p>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
<style>
|
||||
#demo {
|
||||
height:6em;
|
||||
width:20em;
|
||||
overflow:auto;
|
||||
}
|
||||
</style>
|
||||
<div id="demo">
|
||||
<p>Sed pretium leo a quam. Sed placerat cursus odio. Duis varius mauris luctus enim. Sed augue. Vivamus malesuada pretium orci. In hac habitasse platea dictumst. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent et ante. Praesent convallis. Pellentesque sit amet leo. Ut convallis. Curabitur tincidunt, ipsum facilisis ultricies bibendum, eros dolor venenatis odio, id rutrum purus sem ac sem. Donec vel enim. Quisque purus. Vivamus fringilla, nibh sit amet blandit suscipit, dui arcu viverra magna, id consectetuer dui orci tincidunt neque. Morbi eget libero. Phasellus tempor. Duis dapibus. Pellentesque nisi arcu, mollis in, euismod non, fermentum sit amet, neque.</p>
|
||||
</div>
|
||||
<button id="demo-run">run</button>
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
var attributes = {
|
||||
scroll: { to: [0, 200] }
|
||||
};
|
||||
var anim = new YAHOO.util.Scroll('demo', attributes);
|
||||
|
||||
YAHOO.util.Event.on('demo-run', 'click', function() {
|
||||
anim.animate();
|
||||
});
|
||||
|
||||
YAHOO.log("The example has finished loading; as you interact with it, you'll see log messages appearing here.", "info", "example");
|
||||
})();
|
||||
</script>
|
||||
|
||||
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
205
www/extras/yui/examples/animation/units.html
Normal file
205
www/extras/yui/examples/animation/units.html
Normal file
File diff suppressed because one or more lines are too long
70
www/extras/yui/examples/animation/units_clean.html
Normal file
70
www/extras/yui/examples/animation/units_clean.html
Normal file
|
|
@ -0,0 +1,70 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<title>Using Custom Units for an Animation</title>
|
||||
|
||||
<style type="text/css">
|
||||
/*margin and padding on body element
|
||||
can introduce errors in determining
|
||||
element position and are not recommended;
|
||||
we turn them off as a foundation for YUI
|
||||
CSS treatments. */
|
||||
body {
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
|
||||
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
|
||||
<script type="text/javascript" src="../../build/animation/animation-min.js"></script>
|
||||
|
||||
|
||||
<!--begin custom header content for this example-->
|
||||
<style type="text/css">
|
||||
#demo {
|
||||
background:#ccc;
|
||||
margin-bottom:1em;
|
||||
overflow:hidden;
|
||||
width:30em;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!--end custom header content for this example-->
|
||||
|
||||
</head>
|
||||
|
||||
<body class=" yui-skin-sam">
|
||||
|
||||
<h1>Using Custom Units for an Animation</h1>
|
||||
|
||||
<div class="exampleIntro">
|
||||
<p>This demonstrates how to use YUI Animation with units other than pixels. Click the button to begin the demo.</p>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
<div id="demo">Demo</div>
|
||||
<button id="demo-run">run</button>
|
||||
<script>
|
||||
(function() {
|
||||
var attributes = {
|
||||
width: { from: 30, to: 10, unit:'em' }
|
||||
};
|
||||
var anim = new YAHOO.util.Anim('demo', attributes);
|
||||
|
||||
YAHOO.util.Event.on('demo-run', 'click', function() {
|
||||
anim.animate();
|
||||
});
|
||||
|
||||
YAHOO.log("The example has finished loading; as you interact with it, you'll see log messages appearing here.", "info", "example");
|
||||
})();
|
||||
</script>
|
||||
|
||||
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue