[DHTML] Floaty UFO

**Twey** · 02-07-2007, 09:09 AM

Heh

It's a lot more distracting with a larger resolution (since the object doesn't go off-screen). Perhaps a more random motion?

**Fuzzyspace** · 02-07-2007, 10:04 AM

Posted by djr33:
Could you attach a link to the image as well? That would make it a fun toy on the page.

Did you mean this?

http://www.spyatt.plus.com/FloatingUFO/images/UFO.gif

Posted by Twey:
Perhaps a more random motion?

The initial setup is random but then it follows a constantly changing eccentric CosSine path. I have a similar script using the same UFO that follows randomly generated spline paths but it looks kinda "Bumpy". To make it truly random i need to pull my socks up with regard to learning a bit more coding.

Thanks for the kind comments guys

**djr33** · 02-07-2007, 10:09 AM

I meant a link on the active UFO on the page, so you could say "click the UFO to..." as a simple example.

When it went off the side of the screen (all on it's own... not based on my scrolling) it added a horizontal scrollbar.

**Fuzzyspace** · 02-07-2007, 10:19 AM

I meant a link on the active UFO on the page, so you could say "click the UFO to..." as a simple example.

Actually i have been thinking about doing that, need to sort that out. The other idea was clicking on it could make it explode or fly off the viewing area, most likely while the user is screaming "Go awayyyy!" at it.

it added a horizontal scrollbar

Yes it overshoots from time to time (Its part of the scripts charm). Scroll bars could be removed but that would destroy the functionality of the page. Is there a way of preventing it from moving the scrollbar?

**djr33** · 02-07-2007, 10:36 AM

Seems like the math could limit it exceeding the width of the screen... I'd hope.

Ha, an explosion would be funny.

But what I was thinking is more along the lines of a useful script. We could put it on the page and have something float in, perhaps a "newspaper" icon or something and you click it and it takes you to an update. Or something along those lines. Just a thought.

**Fuzzyspace** · 02-07-2007, 10:53 AM

Seems like the math could limit it exceeding the width of the screen... I'd hope.

Yes there is enough flexibility in the script to do that, i would just have to change a few variables. It may still generate the scroll bar when the window is resized due to the nature of the script working its way back into the viewing area.

"newspaper" icon or something and you click it and it takes you to an update

I have another script (I could submit shortly) that moves a graphic around the screen in a predefined path (You can define the waypoints and how much it deviates from the path) that would work even better for that.

Anyhow i will have a go at making the UFO clickable. Kaboooom!

**Fuzzyspace** · 02-07-2007, 12:17 PM

Ooh this is fun, need some help here.

Example code:

var testfire = document.getElementById("spaceship").fireEvent("onmouseover")
window.status = testfire

This is to check the mouse pointer is over the UFO, how would i get this to work? It just seems to return a false even after doing a onmouseover. The window.status is just for test purposes.

**Fuzzyspace** · 02-07-2007, 03:11 PM

Never mind, ive figured how to do it. New version will be uploaded later.

**Fuzzyspace** · 02-07-2007, 06:47 PM

New clickable version uploaded. The UFO now departs in an angry kind of way when you click on it. Of course thats if you can catch it in the first place...

http://www.spyatt.plus.com/FloatingUFO/FloatyUFO.html

I have another "click to a link" script that will work better than this one coming very soon, the UFO is rather hard to catch

**techno_race** · 04-12-2007, 02:52 AM

I caught it.
I scanned the Pulsating Text code and the Spider Web links code, changed them and combined them:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head><title>UFO+</title><meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style>
.disableHscroll{
width:100&#37;;overflow-x:hidden;overflow-y:scroll;
}

v\:* {
 BEHAVIOR: url(#default#VML)
}
</style><script>
<!--

//Pulsating Text (Chris A e-mail: KilerCris@Mail.com)
//Permission granted to Dynamic Drive to feature script in archive
//For full source and 100's more DHTML scripts, visit http://www.dynamicdrive.com

var divs = new Array();
var da = document.all;
var start;

//CONFIGUER THESE VARS!!!!!!
//speed of pulsing
var speed = 50;

function initVars(){

if (!document.all)
return

//Extend of shrink the below list all you want
//put an "addDiv(1,"2",3,4); for each div you made, 
//1)'id' of div
//2)color or glow(name or hex)(in quotes!!!)
//3)minimum strength
//4)maximum strength

addDiv(body,"yellow",2,11);


//NO MORE EDITING!!!!!!



startGlow();
}

function addDiv(id,color,min,max)
{
var j = divs.length;
divs[j] = new Array(5);
divs[j][0] = id;
divs[j][1] = color;
divs[j][2] = min;
divs[j][3] = max;
divs[j][4] = true;
}

function startGlow()
{
	if (!document.all)
		return 0;

	for(var i=0;i<divs.length;i++)
	{
		divs[i][0].style.filter = "Glow(Color=" + divs[i][1] + ", Strength=" + divs[i][2] + ")";
		divs[i][0].style.width = "100%";
	}

	start = setInterval('update()',speed);
}

function update()
{
	for (var i=0;i<divs.length;i++)
	{
		if (divs[i][4])
		{
			divs[i][0].filters.Glow.Strength++;
			if (divs[i][0].filters.Glow.Strength == divs[i][3])
				divs[i][4] = false;
		}
	
		if (!divs[i][4])
		{
			divs[i][0].filters.Glow.Strength--;
			if (divs[i][0].filters.Glow.Strength == divs[i][2])
				divs[i][4] = true;
		}
	}
}
-->
</script></head><body onload="initVars();msover('#FFEEEE')"><script>

/***********************************************
* Spider Web Links- Copyright (c) Peter Gehrig
* Website: http://www.24fun.com
* Script available at/modified by Dynamic Drive (http://www.dynamicdrive.com)
* This notice must stay intact for use
***********************************************/

// Minor modification by DD to disable horizontal scrollbar
///////////////////////////////////////////////////////////////////////////
// CONFIGURATION STARTS HERE
///////////////////////////////////////////////////////////////////////////

// the default color of the 8 spiderlines
var defaultcolor="#F5F5F5"

// the width of the 8 spiderlines while highlighting textlinks (pixels)
var lineweighthighlight=14

// the width of the 8 spiderlines while NOT highlighting textlinks (pixels)
var lineweightnormal=2

///////////////////////////////////////////////////////////////////////////
// CONFIGURATION ENDS HERE
///////////////////////////////////////////////////////////////////////////

function ietruebody(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

var distancetomouse=0

var mousepos_x=0
var mousepos_x=0

var marginleft=0
var margintop=0
var marginbottom=0
var marginright=0

var margincenterx
var margincentery

var mousepos_x=0
var mousepos_x=0

if (document.all&&window.print){
    document.write('<div id="bodycontent" style="position:relative">')
}

function initiateanimation(){

    marginbottom=ietruebody().clientHeight
    marginright=ietruebody().clientWidth
    margincenterx=Math.floor(marginright/2)
    margincentery=Math.floor(marginbottom/2)
    
    rectangulartopleft.to=marginleft+","+margintop
    rectangulartopright.to=marginright+","+margintop
    rectangularbottomleft.to=marginleft+","+marginbottom
    rectangularbottomright.to=marginright+","+marginbottom
    
    rectangulartop.to=margincenterx+","+margintop
    rectangularright.to=marginright+","+margincentery
    rectangularbottom.to=margincenterx+","+marginbottom
    rectangularleft.to=marginleft+","+margincentery
    
    rectangulartopleft.strokecolor=defaultcolor
    rectangulartopright.strokecolor=defaultcolor
    rectangularbottomleft.strokecolor=defaultcolor
    rectangularbottomright.strokecolor=defaultcolor
    
    rectangulartop.strokecolor=defaultcolor
    rectangularright.strokecolor=defaultcolor
    rectangularbottom.strokecolor=defaultcolor
    rectangularleft.strokecolor=defaultcolor
}

function msover(thiscolorhighlight){
    if(document.all&&window.print){
        rectangulartopleft.strokecolor=thiscolorhighlight
        rectangulartopright.strokecolor=thiscolorhighlight
        rectangularbottomleft.strokecolor=thiscolorhighlight
        rectangularbottomright.strokecolor=thiscolorhighlight
    
        rectangulartop.strokecolor=thiscolorhighlight
        rectangularright.strokecolor=thiscolorhighlight
        rectangularbottom.strokecolor=thiscolorhighlight
        rectangularleft.strokecolor=thiscolorhighlight
        
        rectangulartopleft.strokeweight=lineweighthighlight
        rectangulartopright.strokeweight=lineweighthighlight
        rectangularbottomleft.strokeweight=lineweighthighlight
        rectangularbottomright.strokeweight=lineweighthighlight
    
        rectangulartop.strokeweight=lineweighthighlight
        rectangularright.strokeweight=lineweighthighlight
        rectangularbottom.strokeweight=lineweighthighlight
        rectangularleft.strokeweight=lineweighthighlight
    }
}

function msout(){
    if(document.all&&window.print){
        rectangulartopleft.strokecolor=defaultcolor
        rectangulartopright.strokecolor=defaultcolor
        rectangularbottomleft.strokecolor=defaultcolor
        rectangularbottomright.strokecolor=defaultcolor
    
        rectangulartop.strokecolor=defaultcolor
        rectangularright.strokecolor=defaultcolor
        rectangularbottom.strokecolor=defaultcolor
        rectangularleft.strokecolor=defaultcolor
        
        rectangulartopleft.strokeweight=lineweightnormal
        rectangulartopright.strokeweight=lineweightnormal
        rectangularbottomleft.strokeweight=lineweightnormal
        rectangularbottomright.strokeweight=lineweightnormal
    
        rectangulartop.strokeweight=lineweightnormal
        rectangularright.strokeweight=lineweightnormal
        rectangularbottom.strokeweight=lineweightnormal
        rectangularleft.strokeweight=lineweightnormal      
    }
}


function momouse(){
    if(document.all&&window.print){
        mousepos_x=ietruebody().scrollLeft+event.clientX
        mousepos_y=ietruebody().scrollTop+event.clientY
    
        rectangulartopleft.from=mousepos_x+","+mousepos_y
        rectangulartopright.from=mousepos_x+","+mousepos_y
        rectangularbottomleft.from=mousepos_x+","+mousepos_y
        rectangularbottomright.from=mousepos_x+","+mousepos_y
    
        rectangulartop.from=mousepos_x+","+mousepos_y
        rectangularright.from=mousepos_x+","+mousepos_y
        rectangularbottom.from=mousepos_x+","+mousepos_y
        rectangularleft.from=mousepos_x+","+mousepos_y
     }
}

if(document.all&&window.print){
    //document.body.className="disableHscroll"
		ietruebody().className="disableHscroll"
    code="<v:line id=rectangulartopleft style='LEFT:0;POSITION:absolute;TOP:0;' strokeweight='"+lineweightnormal+"pt'></v:line>" 
    code+="<v:line id=rectangulartopright style='LEFT:0;POSITION:absolute;TOP:0;' strokeweight='"+lineweightnormal+"pt'></v:line>" 
    code+="<v:line id=rectangularbottomleft style='LEFT:0;POSITION:absolute;TOP:0;' strokeweight='"+lineweightnormal+"pt'></v:line>" 
    code+="<v:line id=rectangularbottomright style='LEFT:0;POSITION:absolute;TOP:0;' strokeweight='"+lineweightnormal+"pt'></v:line>" 

    code+="<v:line id=rectangulartop style='LEFT:0;POSITION:absolute;TOP:0;' strokeweight='"+lineweightnormal+"pt'></v:line>" 
    code+="<v:line id=rectangularright style='LEFT:0;POSITION:absolute;TOP:0;' strokeweight='"+lineweightnormal+"pt'></v:line>" 
    code+="<v:line id=rectangularbottom style='LEFT:0;POSITION:absolute;TOP:0;' strokeweight='"+lineweightnormal+"pt'></v:line>" 
    code+="<v:line id=rectangularleft style='LEFT:0;POSITION:absolute;TOP:0;' strokeweight='"+lineweightnormal+"pt'></v:line>" 

    document.body.insertAdjacentHTML("afterBegin",code)
    document.onmousemove=momouse
    window.onload=initiateanimation
}
</script>
<div id="spaceship" style="position:absolute; visibility: hidden">
<img src="images/UFO.gif" border="0" onClick="goaway()">
</div>

Thread: [DHTML] Floaty UFO

Thread Tools

Search Thread

Bookmarks

Bookmarks

Posting Permissions