|
"Arteviva2"
contribuição de Paulo Baddini
Credits:
° images (all): pastel on paper by Guacira Sampaio Rocha
° background image: "Wall" by Guacira
° mid: "aria_bachianas_brasileiras_nr5" (found for free
in the net)
° script author: Phil
Richards
° prepared, commented and posted
(as it is in this page) by: Paulo Baddini
1) Dentro
das tags "<head> </head>"
coloque:
" <STYLE>BODY .hidimg
{
LEFT: -10000px; POSITION: absolute; TOP: 0px; VISIBILITY: hidden
}
</STYLE> "
2) Dentro
das tags <body> </body>
coloque:
" <body
bgcolor="#4C4849" text="CCCC99" onload=init(); scroll=yes>
<div align="center"></div>
<BGSOUND balance=240
src="defina
aqui o caminho do som.mid" volume=0><IMG
class=hidimg id=pic0 name=coloque aqui
o nome da imagem logo abaixo
src="aqui o
caminho completo da primeira imagem">
<IMG class=hidimg
id=pic1 name=o nome da segunda
src="o caminho
da segunda"> <IMG class=hidimg
id=pic2 name=o nome
src="o caminho">
<IMG class=hidimg
id=pic3 name=o nome
src="o caminho">
<IMG class=hidimg
id=pic5 name=o nome
src="o caminho">
<IMG class=hidimg
id=pic6 name=o nome
src="o caminho">
<IMG class=hidimg
id=pic7 name=o nome
src="o caminho">
<IMG class=hidimg
id=pic8 name=o nome
src="o caminho">
<IMG class=hidimg
id=pic4 name=o nome da imagem que se destacará
no quadrado central
src="o caminho
da imagem acima descrita">
<SCRIPT autor="Phil Richards April
2001">
var panelsAcross = 3; // PAINÉIS
HORIZONTAIS
var panelsDown = 3; // PAINÉIS
VERTICAIS
var panelSpacing = 0; // ESPAÇAMENTO
ENTRE PAINÉIS
var panelWidth = 790/3; // LARGURA
DE CADA PAINEL
var panelHeight = 600/3; // ALTURA
DE CADA PAINEL
var boxLeft = 50; // MARGEM
ESQUERDA
var boxTop = 5; // MARGEM
SUPERIOR
var speed = 0.005; // RAPIDEZ
DO MOVIMENTO
var numPanels = panelsAcross * panelsDown
var panels = new Array();
var picWidth, picHeight;
var t = 0;
var mxRange, myRange;
function init()
{ var i;
document.body.insertAdjacentHTML("afterBegin","<span
id = \"box\" style = \"overflow: hidden; position: absolute;
top: " + boxTop + "; left: " + boxLeft + "; width:
" + ( 4 + panelsAcross * panelWidth + ( panelsAcross - 1 ) * panelSpacing)
+ "; height: " + ( 4 + panelsDown * panelHeight + ( panelsDown
- 1) * panelSpacing) + ";\"></span>");
for(i = 0; i < panelsAcross; i++)
{ for(j = 0; j < panelsDown; j++)
{ panels[i * panelsDown + j] = new panel(i, j, "pic" + (i
* panelsDown + j));
}
}
// box.insertAdjacentHTML("AfterBegin","<img src=\""+pic2.src+"\">");
ANIM = 50
setInterval("anim();", ANIM);
}
function anim()
{ var i;
t += speed;
for(i = 0; i < numPanels; i++)panels[i].anim();
}
function panelAnim()
{ this.is.posLeft = -this.mxRange * ( 1 + Math.cos( ( t + this.dt )/0.71)
);
this.is.posTop = -this.myRange * ( 1 + Math.sin(this.m * ( t + this.dt)
));
}
function panel(i, j, img)
{ picWidth = parseInt(eval(img + ".width"));
picHeight = parseInt(eval(img + ".height"));
this.i = i;
this.j = j;
if( ( i + j )%2 == 0)
{ this.m = 1;
}
else
{ this.m = -1;
}
this.mxRange = (picWidth - panelWidth)/2;
this.myRange = (picHeight - panelHeight)/2;
//you can play with the numbers in the next line for different effects
this.dt = ( i + 1.5 * j) * 2;
//alternative version
//this.dt = -( i + panelsAcross * j) * 0.01;
//another alternative
//this.dt = 0;
box.insertAdjacentHTML("afterBegin","<span style =
\"position: absolute; overflow: hidden; left: " + (i * (panelWidth
+ panelSpacing)) + "; top: " + (j * (panelHeight + panelSpacing))
+ "; width: " + panelWidth + "; height: " + panelHeight
+ "; \"><img src = \"" + (eval(img + ".src"))
+ "\" style = \"position: absolute;\"></span>");
obj = box.all.tags("span")[0];
this.ss = obj.style;
this.is = obj.children[0].style;
this.anim = panelAnim;
}
</SCRIPT> "
3) Não
esqueça de fechar com as tags: " </BODY></HTML>
"
4) Todos
os textos em destaque de cor definem as áreas que você
poderá editar, mudando os parâmetros.
Atenção: não
esqueça de desprezar todas as aspas que não estejam na
cor branca.
Esse script pode perfeitamente ser
copiado dentro da aba Origem de seu Outlook Express, e ser enviado,
com fundo musical, como mensagem aos seus amigos.
|