Closed Thread Icon

Preserved Topic: smooth mover (Page 1 of 1) Pages that link to <a href="https://ozoneasylum.com/backlink?for=18031" title="Pages that link to Preserved Topic: smooth mover (Page 1 of 1)" rel="nofollow" >Preserved Topic: smooth mover <span class="small">(Page 1 of 1)</span>\
 
911
Paranoid (IV) Inmate

From: Stuttgart, Germany
Insane since: Apr 2001

 posted posted 07-04-2001 16:03

i wanna learn to move a pic as you can see it on the start-page of www.ozones.com

could someone please tell me how i can do that or where i can find a good tutorial.
Tikita
Nervous Wreck (II) Inmate

From: Canada
Insane since: Jun 2001

 posted posted 07-05-2001 01:21

I looked at his source code, and well.. It confused me =), so I made a simple one which does the same effect. However, I have no idea if it works in NS (it sucks anyways), but works fine in MSIE . What I have is

code:
<script>

document.onmousemove=MoveBar;

function MoveBar(e) 

{

xloc=event.x;

if(xloc < 900 && xloc > 65)

glow.style.left=xloc-65;

}

</script>



Then, for a style I have

code:
<STYLE TYPE="text/css">

#glow  {position:absolute; left:0; width:50; top:100;z-index:1500;}

</style>



And in the HTML, you'll have

code:
<div ID="glow><img src="./images/bar.gif"></div>



The bar.gif is your "glow" bar which slides around.

To get it to go behind the text, what I did was make a bunch of transparent gifs for news/links/etc, and
put them onto Z-index above the glow

#iface {position:absolute; left:0;top:0;z-index:2000;}

That would go into your style section. Then, in your HTML, its just a matter of placing your info to accomodate.

The whole source (for my page, which I am still working on, cross-browser combatability is mostlikely non-existant)

code:
<STYLE TYPE="text/css">

#glow  {position:absolute; left:0; width:50; top:100;z-index:1500;}

#iface {position:absolute; left:0;top:0;z-index:2000;}

#bar   {position:absolute; left:0;top:0;z-index:2000;}

#close {position:absolute; left:973; top:0;z-index:3000;}

</style>



<SCRIPT LANGUAGE="JavaScript">



document.onmousemove=MoveBar;

function MoveBar(e) 

{

xloc=event.x;

if(xloc < 900 && xloc > 65)

glow.style.left=xloc-65;

}

function section(num)

{

// navigation stuff will go here

}

function closewin()

{

	parent.close();

}

winSTATUS = "down";

										

</script>



<body>

<html>

<div ID="iface">

<table border=0 cellpadding=0 cellspacing=0>

	<tr>

	<td colspan=6 bgcolor=#B0C4E0 height=10 width=983>

			<div ID="close" onMouseUp=javascript:closewin()><img src="./images/close.gif"></div>

	</td>

	<tr>

	<td colspan=6><img src=./images/shypht-header.jpg width=983> </td>

	</tr>

	<tr>

		<td onMouseUp='section(0)'>

			<img src=./images/news.gif>

		</td>

		<td onMouseUp='section(1)'>

			<img src=./images/graphics.gif>

		</td>

		<td onMouseUp='section(2)'>

			<img src=./images/code.gif>

		</td>

		<td onMouseUp='section(3)'>

			<img src=./images/web.gif>

		</td>

		<td onMouseUp='section(4)'>

			<img src="./images/about.gif">

		</td>

		<td onMouseUp='section(5)'>

			<img src=./images/links.gif>

		</td>

	</tr>

</table>

</div>

<div ID="glow"><img src=./images/bar.gif></div>

</body>

</html>



I am just using a simple table to hold all of my links. This is not the best code, its pretty simple and has no browser/error checking things so it probably wont work in netscape. But, it should give you an idea of where to start.
911
Paranoid (IV) Inmate

From: Stuttgart, Germany
Insane since: Apr 2001

 posted posted 07-05-2001 10:35

Well Tikita,

Big THX for your code, i tried it and it works fine in IE.
But that wasn´t the thing i am looking for. I wanna do the "dancing" pics.
So plz help me if you can. Who knows a good tutorial?
InI
Paranoid (IV) Mad Scientist

From: Somewhere over the rainbow
Insane since: Mar 2001

 posted posted 07-05-2001 10:50

The poster has demanded we remove all his contributions, less he takes legal action.
We have done so.
Now Tyberius Prime expects him to start complaining that we removed his 'free speech' since this message will replace all of his posts, past and future.
Don't follow his example - seek real life help first.

911
Paranoid (IV) Inmate

From: Stuttgart, Germany
Insane since: Apr 2001

 posted posted 07-05-2001 15:44

thx a lot.
timothymcnulty: i am not looking for someone who writes the code for me. i really wanna learn and understand the technique.
i´ll be back with a lot of questions. ;-)
Tikita
Nervous Wreck (II) Inmate

From: Canada
Insane since: Jun 2001

 posted posted 07-05-2001 18:11

What I would do, is have a style called like

#floatingbar1 {position:absolute; left:0; width:50; top:100;z-index:1500;}

then have the image you want to slide, <div ID="floatingbar1><img src=./image></div>

And when the page loads, call up a function which simply loops over and over, sliding the bar across the screen back and forth. like

code:
while(something)

{

 if (dir==1) // to the right

{

  floatingbar1.style.left=x;

 x++;

 if(x<800) dir=0;

}

if(dir==0) // to the right

 floatingbar.1.style.left=x;

 x--;

 if(x>0) dir=1;

}


havnt tested it out, but I think it would be something like that. But looking at Ozones, it looks like the bars "slow down" as they reach their max left/right location, not sure how I'd go about doing that.
3rdperson
Paranoid (IV) Inmate

From: your subconscious. (scared yet?)
Insane since: May 2001

 posted posted 07-06-2001 01:25

threep contributes his thoughts on the matter:
"if its DHTML (which it is), if its moving layers (which it is), if its smooth moving (which it is), and if its cross browser (which it is!), one spot comes to mind: http://www.dansteinman.com
enjoy."
mr.maX
Maniac (V) Mad Scientist

From: Belgrade, Serbia
Insane since: Sep 2000

 posted posted 07-06-2001 19:44

Dan's first DynAPI library is very old. You should take a look at the new DynAPI2...

« Backwards — Onwards »

Show Forum Drop Down Menu