<html>
<head>
<title>WOweb.ru - Scripts - JavaScript - AnimationIntro</title>
<META http-equiv="Content-Type" content="text/html; charset=windows-1251">
<META NAME="description" CONTENT="Коллекции CGI, PHP, JavaScript скриптов, Java апплеты, огромное количество документации по разным языкам программирования, анимированные гифы, фоны, полезные программы, форум, ссылки по теме.">
<META NAME="keywords" CONTENT="perl scripts, perl, cgi scripts, cgi, перл, java, java scripts, веб-программирование, web-programming, html, каталог ссылок, документация по веб-программированию, cgi скрипты, java скрипты, игры, java апплеты, апплеты, гифы, скрипты, скрипт, книги по веб-программированию, форум по perl, CGI, Perl, script, HTML">
<Style>
A:Link{ Color: white; Text-decoration: underline}
A:Visited{ Color: white; Text-decoration: underline}
A:Hover{ Color: white; Text-decoration: none}
td, body {font-family: verdana, arial, helvetica; font-size:11px;}
</Style>
<!-- HEAD START HERE -->
<style type="text/css">
.clDivs {position:absolute; width:30px; height:30px; left:0px; font-size:80px; font-weight:bold; font-family:arial black,arial,helvetica,sans-serif; color:#999999; visibility:hidden;}
</style>
<script language="JavaScript" type="text/javascript">
/**********************************************************************************
AnimationIntro
* Copyright (C) 2001 Thomas Brattli
* This script was released at WOscripts.com
* Visit for more great scripts!
* This may be used and changed freely as long as this msg is intact!
* We will also appreciate any links you could give us.
*********************************************************************************/
function lib_bwcheck(){ //Browsercheck (needed)
this.ver=navigator.appVersion
this.agent=navigator.userAgent
this.dom=document.getElementById?1:0
this.opera5=this.agent.in dexOf("Opera 5")>-1
this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom && !this.opera5)?1:0;
this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom && !this.opera5)?1:0;
this.ie4=(document.all && !this.dom && !this.opera5)?1:0;
this.ie=this.ie4||this.ie5||this.ie6
this.mac=this.agent.indexOf("Mac")>-1
this.ns6=(this.dom && parseInt(this.ver) >= 5) ?1:0;
this.ns4=(document.layers && !this.dom)?1:0;
this.bw=(this.ie6 || this.ie5 || this.ie4 || this.ns4 || this.ns6 || this.opera5)
return this
}
var bw=new lib_bwcheck()
/***************************************************************************
Variables to set.
Remember that if you want another font, font-size or whatever you set
that in the .clDivs class in the styletag!
****************************************************************************/
numberOfLetters=11 //How many letters do you have
ypos=-100 //The Y position of the letters, relative to the center
//The x positions of the letters, relative to center.
//This is the tricky part, when you change font-size or type and letters
//be sure to play with the values in this array, if not your letters
//will not arrange correctly. (note the testing variable)
xpos=new Array()
xpos[0] = -320
xpos[1] = -265
xpos[2] = -215
xpos[3] = -160
xpos[4] = -105
xpos[5] = -25
xpos[6] = 5
xpos[7] = 100
xpos[8] = 150
xpos[9] = 190
xpos[10] = 270
//To make the xpos a little simpler to set you can set this value to 1
//If you do no animation will happen, but the letters will place themself
//where they will end at the end of the animation.
testing=0
//There are 3 different animation you can use.
//Set this variable to 1,2 or 3 for the different ones,
//or set it to 4 for random
animation=4
aspeed=10 //The timer animation speed.
/********************************************************************************
Object constructor
********************************************************************************/
function makeObj(obj,speed,xmove,ymove,works){
this.el=bw.dom? document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?document.layers[obj]:0;
this.css=bw.dom || bw.ie4?this.el.style:bw.ns4?this.el:0;
this.moveIt=b_moveIt;
}
// A unit of measure that will be added when setting the position of a layer.
var px = bw.ns4||window.opera?"":"px";
function b_moveIt(x,y){this.x=x; this.y=y; this.css.left=this.x+px; this.css.top=this.y+px;}
/***************************************************************************
Initiating page and starting animation
****************************************************************************/
var posArray,oZdivs;
function introInit(){
pageXcenter = bw.op5||bw.ns4 ||bw.ns6?innerWidth/2:document.body.offsetWidth/2
pageYcenter = bw.op5||bw.ns4||bw.ns6?innerHeight/2:document.body.offsetHeight/2
oZdivs = new Array()
for(var i=0; i<numberOfLetters; i++){
oZdivs[i] = new makeObj('div'+i)
oZdivs[i].moveIt(-200,0)
oZdivs[i].css.visibility = "visible"
}
if (animation==4) animation = Math.round(Math.random()*2)+1
if (!testing) eval('anim'+animation+'(0)')
else testIt()
}
function testIt(){
alert(pageYcenter)
for(var i=0; i<oZdivs.length; i++){
oZdivs[i].moveIt((pageXcenter+xpos[i]),(pageYcenter+ypos))
}
}
/***************************************************************************
Intro 1
****************************************************************************/
xPath1 = new Array(-277,-271,-264,-255,-245,-234,-223,-210,-196,-181,-161,-134,-98,-52,1,53,98,131,151,156,147,124,92,59,0)
yPath1 = new Array(-240,-206,-162,-114,-64,-16,29,71,112,151,187,217,241,255,260,254,239,213,179,143,108,77,51,30,0)
function anim1(num,test){
if (num<oZdivs.length){
st = test?test:0;
animX(num,'xPath1','yPath1',aspeed,st,'anim1('+(num+1)+','+st+')')
}else endanim(0)
}
/***************************************************************************
Intro 2
****************************************************************************/
xPath2 = new Array(-285,-270,-255,-240,-225,-210,-195,-180,-165,-150,-135,-120,-105,-90,-75,-60,-45,-30,-15,0)
yPath2 = new Array(-353,-344,-335,-324,-312,-299,-285,-270,-254,-236,-218,-198,-177,-155,-132,-108,-83,-56,-29,0)
function anim2(num){
if (num<oZdivs.length){
animX(num,'xPath2','yPath2',aspeed,0,'anim2('+(num+1)+')')
}else endanim(0)
}
/***************************************************************************
Intro 3
****************************************************************************/
xPath3 = new Array(0,-2,-6,-13,-23,-36,-50,-66,-83,-100,-117,-134,-150,-164,-177,-187,-194,-198,-200,-198,-194,-187,-177,-164,-150,-134,-117,-100,-83,-66 ,-50,-36,-23,-13,-6,-2,0)
yPath3 = new Array(0,-17,-34,-50,-64,-77,-87,-94,-98,-100,-98,-94,-87,-77,-64,-50,-34,-17,0,17,34,50,64,77,87,94,98,100,98,94,87,77,64,50,34,17,0)
funct ion anim3(num){
if (num<oZdivs.length){
animX(num,'xPath3','yPath3',aspeed,0,'anim3('+(num+1)+')')
}else endanim(0)
}
/***************************************************************************
Animation function
****************************************************************************/
function animX(divnum,arrayX,arrayY,speed,num,fn){
arrayXr = new Array(); arrayYr = new Array()
arrayXr = eval(arrayX); arrayYr = eval(arrayY)
arrayX = "'"+arrayX+"'"; arrayY = "'"+arrayY+"'"
if (num<arrayXr.length){
oZdivs[divnum].moveIt(arrayXr[num]+(pageXcenter+xpos[divnum]),arrayYr[num]+(pageYcenter+ypos))
num ++;
setTimeout("animX("+divnum+","+arrayX+","+arrayY+","+speed+","+num+",'"+fn+"')",speed)
}else eval(fn)
}
/***************************************************************************
This is what happens when the animation is over. If
you want something else to happen edit here!
****************************************************************************/
function endanim(num){
if (num<oZdivs.length){
oZdivs[num].css.visibility = "hidden" //Hiding divs
num ++
setTimeout("endanim("+num+")",300)
}else{
//location.href="main2.html" //Going to another page
}
}
/***************************************************************************
Starting the intro when the page is loaded.
****************************************************************************/
onload = introInit;
</script>
<!-- HEAD END HERE -->
</head>
<body bgcolor="#737994" text="#FFFFFF" link="#FFFFFF" topmargin="0" leftmargin="0">
<!-- BODY START HERE -->
<div id="div0" class="clDivs">d</div>
<div id="div1" class="clDivs">y</div>
<div id="div2" class="clDivs">n</div>
<div id="div3" class="clDivs">a</div>
<div id="div4" class="clDivs">m</div>
<div id="div5" class="clDivs">i</div>
<div id="div6" class="clDivs">c</div>
<div id="div7" class="clDivs">h</div>
<div id="div8" class="clDivs">t</div>
<div id="div9" class="clDivs">m</div>
<div id="div10" class="clDivs">l</div>
<!--
NOTES:
You are not limited to using text here. You can have images, text-images flash movies
or whatever inside the divs. If you use images instead of text the
page will be a little bigger, but then you're sure that the it will look
the same on all systems.
Just remember to play with the values in the xpos array if you change anything.
If you add more letters also remember to add to the xpos array and to the
numberOfLetters variable.
Again; If you want to change the appearance of the letters use the .clDivs tag in the
stylesheet.
TIP: If you get problems with scrollbars in Explorer, just set scroll="no" inside the body tag!
Good luck
-Thomas-
-->
<!-- BODY END HERE -->
<center>Обновите чтобы увидеть другой эффект (всего 3).</center>
</body>
</html>
