Web Development

java script splash screen – spade89

spade89

Member

Posts: 561
From: houston,tx
Registered: 11-28-2006
hey i don't know much about javascript ,i was wondering if it was possible to make a splash screen using javascript??

or using any other method other than flash??

------------------
John 14:6

Jesus answered, "I am the way and the truth and the life. No one comes to the Father except through me.

HanClinto

Administrator

Posts: 1828
From: Indiana
Registered: 10-11-2004
Similar to this page? I believe that they use Javascript for this, and yes -- you can do many interesting things for splash screens with Javascript. Yahoo's UI library has a number of animation examples that are available to browse as well, to show you some of the building blocks that you would have to work with.

--clint

spade89

Member

Posts: 561
From: houston,tx
Registered: 11-28-2006
exactly as the matter of fact it was after i saw that ,that i came up with that idea.

------------------
John 14:6

Jesus answered, "I am the way and the truth and the life. No one comes to the Father except through me.

bwoogie

Member

Posts: 380
From: kansas usa
Registered: 03-12-2005
i dont see anything special on that page for needing javascript... inless firefox is bloxing it...

------------------
~~~boogie woogie woogie~~~
Jesus didn't come to save the saints.

spade89

Member

Posts: 561
From: houston,tx
Registered: 11-28-2006
hey i just came up with this splash page i used a free javascript for the text effect.


<html>
<head>

<xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="v"/>
<style>
v\:* { behavior: url(#default#VML); }
</style>
</head>
<body >
<script>
// 3D Wireframe Ticker
// By Peter Gehrig
// Copyright (c) 2003 Peter Gehrig. All rights reserved.
// Permission given to use the script provided that this notice remains as is.
// Additional scripts can be found at http://www.24fun.com
// info@24fun.com
// 10/23/2003

// IMPORTANT:
// If you add this script to a script-library or script-archive
// you have to add a highly visible link to
// http://www.24fun.com on the webpage
// where this script will be featured

// CONFIGURATION:
// Go to http://www.24fun.com
// and create more text animation
// with our new Text Factory.

// Add as many messages as you like
var message=new Array("Welcome to thsi site...")

// Set the colors of the outline. Add as many outline-colors as you like
var fillcolor=new Array("black", "blue", "#008800", "#EEEEEE","olive")

// Set the fillcolors. Add as many fillcolors as you like
var outlinecolor=new Array("black","#000088","#666600")

// Set the width of the outline (pixels)
var outlineweight=2

// Set the font
var fnt="Verdana"

// Set the letter that draws the upper part of the circle
var circlemark="-"

// Set the waiting time between the messages (seconds)
var pause=2

// Set the strength of the fillcolor-opacity
var strengthopacity="20%"

// Set the size of the circle. Values may range from 0.1 to 1
var circlesize=0.5

// Do not edit below this line
var outerwidth=document.body.clientWidth
var outerheight=document.body.clientHeight

var innerwidth=Math.floor(circlesize*outerwidth)
var innerheight=Math.floor(circlesize*outerheight)

var posleft=(outerwidth-innerwidth)/2
var postop=(outerheight-innerheight)/2

var path=new Array()
var i_message=0
var i_outlinecolor=0
var i_fillcolor=0
var i_messagelength=0
var longestmessage=0
pause*=1000

var ie=document.getElementById&&document.all?1:0

for (i=0;i<=message.length-1;i++) {
if (message[i].length>longestmessage) {
longestmessage=message[i].length
}
longestmessage+=4
}

for (i=0;i<=message.length-1;i++) {
var emptyspace=""
var i_emptyspace=(longestmessage-message[i].length)/2
for (ii=0;ii<=i_emptyspace;ii++) {
emptyspace+=circlemark
}
message[i]=emptyspace+" "+message[i]+" "+emptyspace
}

function changeform() {
if (i_fillcolor >= fillcolor.length) {i_fillcolor=0}
if (i_outlinecolor >= outlinecolor.length) {i_outlinecolor=0}
document.getElementById('strokeid').color=outlinecolor[i_outlinecolor]
document.getElementById('fillid').color=fillcolor[i_fillcolor]

if (i_message < message.length) {tick()}
else {
document.getElementById('textpathid').string=""
document.getElementById('textpathid2').string=""
}
}

function tick() {
if (i_messagelength <= message[i_message].length) {
var messagestringend=""
var messagestring=message[i_message].substring(0, i_messagelength)+messagestringend
document.getElementById('textpathid').string=messagestring
document.getElementById('textpathid2').string=messagestring
var timer=setTimeout("tick()",50)
i_messagelength++
}
else {
clearTimeout(timer)
i_messagelength=0
i_message++
i_fillcolor++
i_outlinecolor++
var timer=setTimeout("changeform()",pause)
}

}

if (ie) {
document.write('<div id="roofid" style="position:absolute;left:0px;top:0px;width:'+outerwidth+'px;height:'+outerheight+'px;overflow:hidden;">')
document.write('<v :oval id="tc" style="position:absolute;top:'+postop+';left:'+posleft+';width:'+innerwidth+';height:'+innerheight+';">')
document.write('<v:shadow on="t" opacity="'+strengthopacity+'"/>')
document.write('<v:stroke id="strokeid" weight="'+outlineweight+'pt" color="'+outlinecolor[0]+'pt"/>')
document.write('<v:fill id="fillid" opacity="'+strengthopacity+'"/>')
document.write('<v :path textpathok="t"/>')
document.write('<v:textpath id="textpathid" on="t" style="font-family:\''+fnt+'\';" fitpath="t" string=""/>')

document.write('</v :oval>')

document.write('<v :oval id="tc2" style="position:absolute;top:'+postop+';left:'+posleft+';width:'+innerwidth+';height:'+innerheight+'">')
document.write('<v:stroke id="strokeid2" weight="'+outlineweight+'pt" color="black"/>')
document.write('<v :path textpathok="t"/>')
document.write('<v:textpath id="textpathid2" on="t" style="font-family:\''+fnt+'\';" fitpath="t" string=""/>')
document.write('<v:extrusion on="t" backdepth="12pt" render="wireframe"/>')
document.write('</v :oval>')

document.write('</div>')
window.onload=changeform
}
</script><br><br>
<center>
<img src="images/splash.jpg"/>
<center>
<script language=javascript>
<!--
var TimeRemaining;
var Timer;

TimeRemaining = 7
Timer = setTimeout("countdown()", 1000);

function countdown()
{
TimeRemaining--;

if (TimeRemaining > 0)
Timer = setTimeout("countdown()", 1000);
else
{
document.location="index2.html";
}
}

//-->
</script>
</body>
</html>

------------------
John 14:6

Jesus answered, "I am the way and the truth and the life. No one comes to the Father except through me.

[This message has been edited by spade89 (edited April 16, 2007).]

[This message has been edited by spade89 (edited April 16, 2007).]