<HTML>
<HEAD>
<TITLE>DHTML Text Animator</TITLE>
<STYLE TYPE="text/css">
<!--
BODY{
font-family:"Times New Roman, Times, serif";
font-size:14px;
color:black;
}
.default{
font-size:24px;
}
.big{
font-size:48px;
font-style:italic;
}
.bigbold{
font-size:36px;
font-weight:bold;
}
.ding{
font-family:"WingDings";
font-size:72px;
}
-->
</STYLE>
</HEAD>
<BODY>
<script>
//==============================================================================
// Text Animator 1999 evolve evolve<AT>p-richards.demon.co.uk
//==============================================================================
// This script will create a display of text fragments fading in and out
// according to a timed schedule. The complete text is split in to sections,
// each having a start time associated with them. When a section is displayed,
// it follows a sequence of fading in, with an optional motion, remaining static
// for a defined time, then fading out - again with an optional motion. Test
// sections can be any colour and any font, style, size etc - define them in the
// style section, but make sure there is a "default" style in there.
//==============================================================================
//==============================================================================
// Sequence definition
// start time (in "ticks")
// text
// CSS class
// x coord, y coord (pixels)
// z index (bigger numbers are closer)
// r, g, b (text colour, each range 0-255)
// fade in speed(0-1)
// change in x coord during fade in
// change in y coord during fade in
// hold time
// fade out speed(0-1)
// change in x coord during fade out
// change in y coord during fade out
txt = new Array();
txt[1] = new Array(0, "This is a test","default", -50,50,0, 0,0,0, 0.1,100,0, 150, .08,0,-40);
txt[2] = new Array(10, "of a", "default", 50,100,0, 0,0,0, 0.05,200,50, 0, .05,200,50);
txt[3] = new Array(20, "method", "bigbold", 100,200,0, 0,0,0, 0.1,0,0, 15, .1,0,0);
txt[4] = new Array(30, "of making", "default", 150,75,0, 0,0,0, 0.5,0,0, 15, .08,0,0);
txt[5] = new Array(40, "words", "big", 300,200,0, 255,0,0, 0.5,0,0, 45, .08,0,20);
txt[6] = new Array(50, "fade", "default", 50,220,0, 0,255,0, 0.1,0,0, 25, .08,0,0);
txt[7] = new Array(58, "in", "default", 100,220,0, 0,255,0, 0.1,0,0, 25, .08,0,0);
txt[8] = new Array(60, "and", "default", 200,250,0, 0,0,255, 1,0,0, 5, .15,0,0);
txt[9] = new Array(70, "out", "default", 100,100,0, 0,0,0, 0.5,0,0, 15, .01,50,-30);
txt[10] = new Array(90, "J", "ding", 200,300,0, 100,40,150, 0.1,0,0, 25, .01,-150,-30);
txt[11] = new Array(95, "A", "default", 50,250,1, 0,0,0, 0.2,0,0, 5, 0.2,0,0);
txt[12] = new Array(96, "B", "default", 65,250,1, 0,0,0, 0.2,0,0, 5, 0.2,0,0);
txt[13] = new Array(97, "C", "default", 80,250,1, 0,0,0, 0.2,0,0, 5, 0.2,0,0);
txt[14] = new Array(98, "D", "default", 95,250,1, 0,0,0, 0.2,0,0, 5, 0.2,0,0);
txt[15] = new Array(99, "E", "default", 110,250,1, 0,0,0, 0.2,0,0, 5, 0.2,0,0);
txt[16] = new Array(100, "F", "default", 125,250,1, 0,0,0, 0.2,0,0, 5, 0.2,0,0);
//==============================================================================
//==============================================================================
//constants
D_FADINGIN=4;
D_HOLDING=3;
D_FADINGOUT=2;
D_REMOVEME=1;
MAXD=15;
W_REPEAT=true;
//==============================================================================
//Globals
words=new Array(MAXD);
avail=new Array(MAXD);
var p=1;
var t=0;
//==============================================================================
//Initialisation
//create divisions - these will be reused. Make sure MAXD id set high enough to
//accommodate the largest number of text sections you are likely to have active
//at the same time.
for(i=1;i<=MAXD;i++){
newDiv = "<DIV ID='W" + i + "' CLASS='default'";
newDiv = newDiv + " STYLE='position:absolute;top:0;left:0;z-index:0;color:RGB(0,0,0);'></DIV>";
document.write(newDiv);
avail[i]=true;
}
//start "ticker" - the number here controls the speed of the sequence
window.setInterval("tick();",20);
//==============================================================================
// getDiv()
// Returns the index of the first free division, or 0 if none available
function getDiv()
{
for(i=1;i<=MAXD;i++){
if(avail[i]==true)return(i);
}
return(0);
}
//==============================================================================
// tick()
// Keeps track of time and creates new word objects on cue.
// Assigns divisions to the word objects as they become available
// Releases divisions held by completed sequences, killing the object
// Calls fadeIt() to execute fade/hold/fade sequence
//
function tick()
{
//t is the time index, incrementing on every tick
//p starts at 1, increments through the sequence, then gets set to 0 to complete it
if(p>0){
n=-1
while(p>0 && t>=txt[p][0] && n!=0){
n=getDiv();
if(n>0){
words[n]=new word(n,txt[p][1],txt[p][2],txt[p][3],txt[p][4],txt[p][5],txt[p][6],txt[p][7],txt[p][8],255,255,255,txt[p][9],txt[p][10],txt[p][11],txt[p][12],txt[p][13],txt[p][14],txt[p][15]);
words[n].addDivision();
avail[n]=false;
if(p<txt.length-1){
p++;
}
else{
p=0;
}
}
}
t++;
}
else{
if(W_REPEAT==true){
finished=true;
for(i=1;i<=MAXD;i++){
if(avail[i]==false)finished=false;
}
if(finished==true){
p=1;
t=0;
}
}
}
//Remove completed word sequence objects and free up the div
for(i=1;i<=MAXD;i++){
if(words[i]!=null){
if(words[i].status==D_REMOVEME){
words[i].killDivision();
avail[i]=true;
words[i]=null;
}
else{
words[i].fadeIt();
}
}
}
}
//==============================================================================
// addDivision()
// Initialises division details
function addDivision()
{
D = document.all["W" + this.divref];
D.style.top=this.top;
D.style.left=this.left;
D.style.zIndex=this.z;
D.style.color="RGB("+ this.brcolour + "," + this.bgcolour + "," + this.bbcolour + ")";
D.className=this.cssclass;
D.innerText=this.text;
}
//==============================================================================
// killDivision()
// cleans up division when sequence finished
function killDivision()
{
document.all["W" + this.divref].innerText="";
}
//==============================================================================
// fadeIt()
// Controls the fade/hold/fade sequence
function fadeIt()
{
//Fade in sequence
if(this.status==D_FADINGIN){
this.fade=this.fade+this.fadein;
if(this.fade>=1){
this.fade=1;
this.status=D_HOLDING;
}
if(this.fade<0){
this.fade=0;
}
red=Math.round(this.brcolour+this.fade*(this.rcolour-this.brcolour));
green=Math.round(this.bgcolour+this.fade*(this.gcolour-this.bgcolour));
blue=Math.round(this.bbcolour+this.fade*(this.bcolour-this.bbcolour));
D = document.all["W" + this.divref];
D.style.color="RGB(" + red + "," + green + "," + blue + ")";
D.style.left=Math.round(this.left+this.fade*this.idx);
D.style.top=Math.round(this.top+this.fade*this.idy);
}
//Hold sequence
if(this.status==D_HOLDING){
this.hold--;
if(this.hold<=0){
this.status=D_FADINGOUT;
}
}
//Fade out sequence
if(this.status==D_FADINGOUT){
this.fade=this.fade-this.fadeout;
if(this.fade<=0){
this.fade=0;
this.status=D_REMOVEME;
}
if(this.fade>1){
this.fade=1;
}
red=Math.round(this.brcolour+this.fade*(this.rcolour-this.brcolour));
green=Math.round(this.bgcolour+this.fade*(this.gcolour-this.bgcolour));
blue=Math.round(this.bbcolour+this.fade*(this.bcolour-this.bbcolour));
D = document.all["W" + this.divref];
D.style.color="RGB(" + red + "," + green + "," + blue + ")";
D.style.left=Math.round(this.left+this.idx+(1-this.fade)*this.odx);
D.style.top=Math.round(this.top+this.idy+(1-this.fade)*this.ody);
}
}
//==============================================================================
// definition of word object
//
function word(divref,text,cssclass,left,top,z,rcolour,gcolour,bcolour,brcolour,bgcolour,bbcolour,fadein,idx,idy,hold,fadeout,odx,ody)
{
//properties
this.divref=divref; //reference number of this "word"
this.text=text; //content
this.cssclass=cssclass; //css style class
this.left=left; //x coordinate (pixels)
this.top=top; //y coordinate (pixels)
this.z=z; //z-index
this.rcolour=rcolour; //hold colour red component
this.gcolour=gcolour; //hold colour green component
this.bcolour=bcolour; //hold colour blue component
this.brcolour=brcolour; //background colour red component
this.bgcolour=bgcolour; //background colour green component
this.bbcolour=bbcolour; //background colour blue component
this.hold=hold; //how many fade ticks to wait before starting to fade
this.fade=0; //fade position
this.fadein=fadein; //fade in rate
this.idx=idx; //x movement during fade-in
this.idy=idy; //y movement during fade in
this.fadeout=fadeout; //fade out rate
this.odx=odx; //x movement during fade out
this.ody=ody; //y movement during fade out
this.status=D_FADINGIN; //current status
//methods
this.addDivision=addDivision; //fill in a division
this.killDivision=killDivision; //clear a division
this.fadeIt=fadeIt; //step through the fade in/hold/fade out sequence
}
</script>
</BODY>
</HTML>
Accueil 
Sujet: Scripts avec des écrits