Fri, 17 May 2024


How to write more complex SMIL presentation?

By: Peter, NetArt Media
Fri, 11 September 2020

<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: Web Development
Share this post:



See All Scripts






Subscribe for our newsletter

Receive the latest blog posts direct in your mailbox