Icontem

File: testPageAnimation.html

Recommend this page to a friend!
  Classes of Manuel Lemos  >  Page animation  >  testPageAnimation.html  >  Download  
File: testPageAnimation.html
Role: Example script
Content type: text/plain
Description: Example code for showing some animation effects
Class: Page animation
Animate HTML Web page elements
Author: By
Last change: Added support to the Callback pseudo-effect.
Date: 4 years ago
Size: 6,790 bytes
 

Contents

Class file image Download
<!DOCTYPE HTML>
<!--
/*
 * testPageAnimation.html
 *
 * @(#) $Id: testPageAnimation.html,v 1.4 2015/06/06 08:15:40 mlemos Exp $
 *
 */
-->
<html lang="en">
<head>
<title>Test the Page Animation Object</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
* { font-family: sans-serif,arial,helvetica }
.box { border-radius: 8px; border-style: solid; border-width: 1px; padding: 4px }
#menu { float: left; width: 10em; overflow: auto; position: fixed; top: 0 }
#effects { margin-left: 10em }
</style>
<script type="text/javascript" src="animation.js"></script>
<script type="text/javascript"><!--

/*
 * Create the animation object
 */
var a = new ML.Animation.Animate();

/*
 * Definition of effects
 */
var effects = {
	ReplaceContent: [
		{
			type: 'MakeVisible',
			element: 'ReplaceContent'
		},
		{
			type: 'ReplaceContent',
			content: '<span style="background-color: yellow">Replaced content here</span>',
			element: 'ReplaceContent'
		}
	],
	AppendContent: [
		{
			type: 'MakeVisible',
			element: 'AppendContent'
		},
		{
			type: 'AppendContent',
			content: '<span style="background-color: yellow">Appended content here<br /></span>',
			element: 'AppendContent'
		}
	],
	PrependContent: [
		{
			type: 'MakeVisible',
			element: 'PrependContent'
		},
		{
			type: 'PrependContent',
			content: '<span style="background-color: yellow">Prepended content here<br /></span>',
			element: 'PrependContent'
		}
	],
	'Emphasize-circle': [
		{
			type: 'MakeVisible',
			element: 'Emphasize-circle'
		},
		{
			type: 'ReplaceContent',
			content: '<span id="Emphasize circle">Emphasize circle</span>',
			element: 'Emphasize-circle'
		},
		{
			type: 'Emphasize',
			method: 'circle',
//			lineWidth: 4,
//			opacity: 0.5,
//			strokeStyle: '#0000ff',
//			duration: 1,
			element: 'Emphasize circle'
		}
	],
	'Emphasize-underline': [
		{
			type: 'MakeVisible',
			element: 'Emphasize-underline'
		},
		{
			type: 'ReplaceContent',
			content: '<span id="Emphasize underline">Emphasize underline</span>',
			element: 'Emphasize-underline'
		},
		{
			type: 'Emphasize',
			method: 'underline',
//			lineWidth: 4,
//			opacity: 0.5,
//			strokeStyle: '#0000ff',
//			duration: 1,
			element: 'Emphasize underline'
		}
	],
	'Emphasize-double-underline': [
		{
			type: 'MakeVisible',
			element: 'Emphasize-double-underline'
		},
		{
			type: 'ReplaceContent',
			content: '<span id="Emphasize double-underline">Emphasize double-underline</span>',
			element: 'Emphasize-double-underline'
		},
		{
			type: 'Emphasize',
			method: 'double-underline',
//			lineWidth: 4,
//			opacity: 0.5,
//			strokeStyle: '#0000ff',
//			duration: 1,
			element: 'Emphasize double-underline'
		}
	],
	'FadeIn': [
		{
			type: 'MakeVisible',
			element: 'FadeIn'
		},
		{
			type: 'ReplaceContent',
			content: '<span id="Fade In" style="background-color: yellow">Fade In</span>',
			element: 'FadeIn'
		},
		{
			type: 'FadeIn',
//			visibility: 'visible',
//			duration: 1,
			element: 'Fade In'
		}
	],
	'FadeOut': [
		{
			type: 'MakeVisible',
			element: 'FadeOut'
		},
		{
			type: 'ReplaceContent',
			content: '<span id="Fade Out" style="background-color: yellow">Fade Out</span>',
			element: 'FadeOut'
		},
		{
			type: 'FadeOut',
//			visibility: 'visible',
//			duration: 1,
			element: 'Fade Out'
		}
	],
	'ProgressNumber': [
		{
			type: 'MakeVisible',
			element: 'ProgressNumber'
		},
		{
			type: 'ReplaceContent',
			content: 'Progress Number <span id="Progress Number">0</span>',
			element: 'ProgressNumber'
		},
		{
			type: 'ProgressNumber',
			start: 0,
			end: 5000,
			duration: 5,
			element: 'Progress Number'
		}
	],
	'SlideIn': [
		{
			type: 'MakeVisible',
			element: 'SlideIn'
		},
		{
			type: 'ReplaceContent',
			content: '<div id="Slide In">Slide In</div>',
			element: 'SlideIn'
		},
		{
			type: 'SlideIn',
			edge: 'right',
//			duration: 1,
			element: 'Slide In'
		}
	],
	'SlideOut': [
		{
			type: 'MakeVisible',
			element: 'SlideOut'
		},
		{
			type: 'ReplaceContent',
			content: '<div id="Slide Out">Slide Out</div>',
			element: 'SlideOut'
		},
		{
			type: 'SlideOut',
			edge: 'right',
//			duration: 1,
			element: 'Slide Out'
		}
	],
	'Callback': [
		{
			type: 'Callback',
			callback: function() { alert('Callback called!'); }
		},
	]
};

// --></script>
</head>
<body>

<div id="menu">
<h1>Effects</h1>
<p><a onclick="a.addAnimation({effects: effects.ReplaceContent}); return false" href="#ReplaceContent">ReplaceContent</a><p>
<p><a onclick="a.addAnimation({effects: effects.AppendContent}); return false" href="#AppendContent">AppendContent</a><p>
<p><a onclick="a.addAnimation({effects: effects.PrependContent}); return false" href="#PrependContent">PrependContent</a><p>
<p><a onclick="a.addAnimation({effects: effects['Emphasize-circle']}); return false" href="#Emphasize-circle">Emphasize circle</a><p>
<p><a onclick="a.addAnimation({effects: effects['Emphasize-underline']}); return false" href="#Emphasize-underline">Emphasize underline</a><p>
<p><a onclick="a.addAnimation({effects: effects['Emphasize-double-underline']}); return false" href="#Emphasize-double-underline">Emphasize double-underline</a><p>
<p><a onclick="a.addAnimation({effects: effects.FadeIn}); return false" href="#FadeIn">FadeIn</a><p>
<p><a onclick="a.addAnimation({effects: effects.FadeOut}); return false" href="#FadeOut">FadeOut</a><p>
<p><a onclick="a.addAnimation({effects: effects.ProgressNumber}); return false" href="#ProgressNumber">ProgressNumber</a><p>
<p><a onclick="a.addAnimation({effects: effects.SlideIn}); return false" href="#SlideIn">SlideIn</a><p>
<p><a onclick="a.addAnimation({effects: effects.SlideOut}); return false" href="#SlideOut">SlideOut</a><p>
<p><a onclick="a.addAnimation({effects: effects.Callback}); return false" href="#SlideOut">Callback</a><p>
</div>

<div id="effects">
<h2>ReplaceContent</h2>
<div class="box" id="ReplaceContent">No content here</div>
<h2>AppendContent</h2>
<div class="box" id="AppendContent">No content here<br></div>
<h2>PrependContent</h2>
<div class="box" id="PrependContent">No content here</div>
<h2>Emphasize circle</h2>
<div class="box" id="Emphasize-circle">Emphasize-circle</div>
<h2>Emphasize underline</h2>
<div class="box" id="Emphasize-underline">Emphasize-underline</div>
<h2>Emphasize double-underline</h2>
<div class="box" id="Emphasize-double-underline">Emphasize-double-underline</div>
<h2>FadeIn</h2>
<div class="box" id="FadeIn">FadeIn</div>
<h2>FadeOut</h2>
<div class="box" id="FadeOut">FadeOut</div>
<h2>ProgressNumber</h2>
<div class="box" id="ProgressNumber">ProgressNumber</div>
<h2>SlideIn</h2>
<div class="box" id="SlideIn">SlideIn</div>
<h2>SlideOut</h2>
<div class="box" id="SlideOut">SlideOut</div>
</div>

</body>
</html>