×
Home About Us Products Services News Free Scripts Contact
news php scripts and software

SMIL example - How to write more complex SMIL presentation?


SMIL - How to write more complex SMIL presentation?

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<?xml version="1.0" encoding="iso-8859-1"?>
<html xmlns:t ="urn:schemas-microsoft-com:time" >
<?IMPORT namespace="t" implementation="#default#time2">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<title>PPI DEMO</title>
<!--TOOLBAR_START-->
<!--TOOLBAR_EXEMPT-->
<!--TOOLBAR_END-->
<style>
 .incr 
{ 
                 padding:10px;
 		 position:absolute;
		 top:0;
		 left:0;
 		 background:yellowgreen;
		 width:100%;
		 height:143px;
		 filter:progid:DXImageTransform.Microsoft.Alpha    (opacity='0');
}

BUTTON 
{ 
                 position:relative; top:800;  border:1px solid black; 

}
</style>
	
</head>

<body style="font-family:verdana; font-size:70%" oncontextmenu="return false">


<div id="oContain" style="position:absolute; top:0; left:0; width:800; height: 60px; border:1px solid black; overflow:hidden">
<span id="oBox1" class="incr" style="background:#0099cc">
<h2>Protein Protein Interactions Demo (made by A. Zamov)</h2>
</span>
<span id="oBox2" class="incr" style="background:tomato;">
<h2>Animations (written in) : SMIL 2.0  </h2>
</span>
<span id="oBox3" class="incr" style="background:yellow">
<h2>Client Side (written in) : JSCRIPT 5.0 + CSS + VML </h2>
</span>
<span id="oBox4" class="incr" style="background:green">
<h2>Server Side (written in) : C# (.NET Web Services) </h2>
</span>
</div>

<t:animate
	id="slideIn"
	targetElement="oContain"
	attributeName="left"
	begin="0"
	calcMode="spline"
	keySplines=" 0 .75 .25 1"
	keyTimes="0;1 "
	values = "-800;10"
	dur = "1"
	fill="freeze"
        />

<t:seq id="timeline1" repeatCount="indefinite" begin="slideIn.end">
	<t:animate
		id="fade1"
		targetElement="oBox1"
		attributeName="filters.item(0).opacity"
		values = "0;100;10"
		dur = "5"
	/>

	<t:animate
		id="fade2"
		targetElement="oBox2"
		attributeName="filters.item(0).opacity"
		values = "0;100;10"
		dur = "5"
	/>

	<t:animate
		id="fade3"
		targetElement="oBox3"
		attributeName="filters.item(0).opacity"
		values = "0;100;10"
		dur = "5"
	/>

	<t:animate
		id="fade4"
		targetElement="oBox4"
		attributeName="filters.item(0).opacity"
		values = "0;100;10"
		dur = "5"
	/>
</t:seq>

Category: SMIL

 
<< Go back