/    Sign up×
Community /Pin to ProfileBookmark

old Netscape layer animation

I don’t have much Javascript experience but I’ve had this old Netscape layer animation that stopped working years ago and I’d like to get it working again under Firefox and IE6+. As you can see, I tried the obvious replacement of “document.layers” with “document.getElementById” but that didn’t help. Any ideas? Thanks.

[CODE]<script language=javascript>
<!–var ns=document.layers ? 1 : 0;–>
var ns=document.getElementById ? 1 : 0;
if (ns) {
window.PrxOff_captureEvents(Event.MOUSEMOVE);
var yBase = .5;
var xBase = .1;
var delay = 10;
var yAmpl = 0;
var yMax = 0;
var step = .1;
var ystep = 0;
var currStep = 0;
var tAmpl=.1;
var Xpos = 100;
var Ypos = 325;
var j = 0;
function MoveHandler(evnt) {
Xpos = evnt.pageX;
Ypos = evnt.pageY;
}
window.onMouseMove = MoveHandler;
function animateLogo() {
yBase = window.innerHeight/2;
xBase = window.innerWidth/2;
for (j=0; j<7 ;j++) {
document.layers[j].top = Ypos + Math.cos((Math.sin(currStep/10)))*yBase*(Math.cos(currStep/10))*Math.sin((currStep/1 + j*50));
<!– document.layers[j].left =Xpos + Math.sin((20*Math.sin(currStep/20)))*xBase*(Math.cos(currStep/10))*Math.sin((currStep)/10);–>
}
currStep += step;
setTimeout(“animateLogo()”, delay);
}
animateLogo();
}
</script>[/CODE]

to post a comment
JavaScript

11 Comments(s)

Copy linkTweet thisAlerts:
@Orc_ScorcherJun 18.2007 — Do you have a demo page for that online? It's a bit hard to replicate an effect I've never seen...
Copy linkTweet thisAlerts:
@Eep__authorJun 18.2007 — Well, if I had a working version I wouldn't be asking for help to update the code. However, if you still have Netscape Navigator 4.x installed, you could test out the code without the "var ns=document.getElementById ? 1 : 0;" line (and uncomment the other line). Basically, the animation just moves different-sized lines up and down in an oscillating motion, gradually going from small to large and back again on a loop. I just need help with the javascript syntax/whatever.
Copy linkTweet thisAlerts:
@Logic_AliJun 18.2007 — Well, if I had a working version I wouldn't be asking for help to update the code. However, if you still have Netscape Navigator 4.x installed, you could test out the code without the "var ns=document.getElementById ? 1 : 0;" line (and uncomment the other line). Basically, the animation just moves different-sized lines up and down in an oscillating motion, gradually going from small to large and back again on a loop. I just need help with the javascript syntax/whatever.[/QUOTE]Yes but one still needs to see the complete page, no matter how broken it may be. The code can't run without the associated elements.
Copy linkTweet thisAlerts:
@Orc_ScorcherJun 18.2007 — I have NN4 installed (thanks to VirtualPC), this seems to be the same (or very similar) script, is this what it looks like?

http://www.mdempfle.de/software.htm
Copy linkTweet thisAlerts:
@Eep__authorJun 19.2007 — Yes but one still needs to see the complete page, no matter how broken it may be. The code can't run without the associated elements.[/QUOTE]There are no associated elements; it runs automatically in a loop, as I already stated...
Copy linkTweet thisAlerts:
@Eep__authorJun 19.2007 — I have NN4 installed (thanks to VirtualPC), this seems to be the same (or very similar) script, is this what it looks like?

http://www.mdempfle.de/software.htm[/QUOTE]
Er, well, I don't know German, but no automatic layer animation can be seen on that page in Firefox.
Copy linkTweet thisAlerts:
@Orc_ScorcherJun 19.2007 — Sigh, are you always that complicated to work with? Of course there are associated elements: the layers that get animated. And no, you won't see any animation on that page with Firefox because it's the same script, extended only for IE. If you open the page in Netscape, is the "magic wand" similar to the one you want?
Copy linkTweet thisAlerts:
@Eep__authorJun 19.2007 — I'm not [I]being[/I] complicated, Orc. I forgot to include the layers in the initial post:

&lt;layer name=a left=0 top=0 visibility=show bgcolor=#626e76 clip=0,0,1,1&gt;&lt;/layer&gt;
&lt;layer name=b left=0 top=0 visibility=show bgcolor=#626e76 clip=0,0,2,1&gt;&lt;/layer&gt;
&lt;layer name=c left=0 top=0 visibility=show bgcolor=#626e76 clip=0,0,3,1&gt;&lt;/layer&gt;
&lt;layer name=d left=0 top=0 visibility=show bgcolor=#626e76 clip=0,0,4,1&gt;&lt;/layer&gt;
&lt;layer name=e left=0 top=0 visibility=show bgcolor=#626e76 clip=0,0,5,1&gt;&lt;/layer&gt;
&lt;layer name=f left=0 top=0 visibility=show bgcolor=#626e76 clip=0,0,6,1&gt;&lt;/layer&gt;
&lt;layer name=g left=0 top=0 visibility=show bgcolor=#626e76 clip=0,0,7,1&gt;&lt;/layer&gt;

As for the "magic wand", I no longer have Netscape Navigator installed but it looks similar from the code.
Copy linkTweet thisAlerts:
@Orc_ScorcherJun 19.2007 — Try this page in Firefox (or IE or Opera) then:&lt;!DOCTYPE html&gt;
&lt;title&gt;Animate lines&lt;/title&gt;
&lt;style&gt;
html,body { overflow: hidden; background-color: #000 }
#layers div { position: absolute; background-color: #626e76 }

#l0 { clip: rect(0px 1px 2px auto) }
#l1 { clip: rect(0px 2px 2px auto) }
#l2 { clip: rect(0px 3px 2px auto) }
#l3 { clip: rect(0px 4px 2px auto) }
#l4 { clip: rect(0px 5px 2px auto) }
#l5 { clip: rect(0px 6px 2px auto) }
#l6 { clip: rect(0px 7px 2px auto) }

&lt;/style&gt;
&lt;body&gt;
&lt;div id="layers"&gt;
&lt;div id="l0"&gt;.&lt;/div&gt;
&lt;div id="l1"&gt;.&lt;/div&gt;
&lt;div id="l2"&gt;.&lt;/div&gt;
&lt;div id="l3"&gt;.&lt;/div&gt;
&lt;div id="l4"&gt;.&lt;/div&gt;
&lt;div id="l5"&gt;.&lt;/div&gt;
&lt;div id="l6"&gt;.&lt;/div&gt;
&lt;/div&gt;
&lt;script&gt;

function rootNameIE() {
// IE &gt;= 6 stores the information about the content area on different
// objects, depending on its mode. In standards ('CSS1Compat') mode, the
// object is document.documentElement, in quirks ('BackCompat') mode the
// object is document.body.
// IE 5.x always uses document.body.
// This function returns the name of the property, not the object itself!
return /BackCompat|undefined/.test(document.compatMode)
? "body" : "documentElement"
}

function addMouseMoveHandler(handler) {
try {
/*
* The easy case: Opera / Firefox / Safari all support addEventListener
* and pass an event object with the coordinates we need in pageX / pageY.
*/
document.addEventListener("mousemove", handler, false)
return
}
catch (ex) {}

<i> </i>try {
<i> </i> /*
<i> </i> * The hard case: IE/Windows. We could either use offsetX / offsetY but
<i> </i> * these properties were not reliable during testing. clientX / clientY
<i> </i> * report the mouse position relative to the top left corner of the
<i> </i> * window so we have to add the current scrolling position. Where this
<i> </i> * position is stored depends on the browser version and the mode
<i> </i> * (standards or quirks) used by the browser.
<i> </i> */

<i> </i> // Determine where to look for the scroll position, document.body or
<i> </i> // document.documentElement.
<i> </i> var rootName = rootNameIE()

<i> </i> function expandEventWithPageXY(e) {
<i> </i> var root = document[rootName]
<i> </i> e.pageX = e.clientX + root.scrollLeft
<i> </i> e.pageY = e.clientY + root.scrollTop
<i> </i> // Call the mousemove handler with this == document and the
<i> </i> // modified event object.
<i> </i> document.__$$handler$$_ = handler
<i> </i> document.__$$handler$$_(e)
<i> </i> document.__$$handler$$_ = void 0
<i> </i> //If you don't need to support IE 5.0, delete the 3 lines above
<i> </i> // and uncomment the next one.
<i> </i> // handler.call(document, e)
<i> </i> }
<i> </i> document.attachEvent("onmousemove", expandEventWithPageXY)
<i> </i>}
<i> </i>catch (ex) {
<i> </i> throw "Browser not supported"
<i> </i>}
}

new function animate() {
var delay = 30
var yAmpl = 0
var yMax = 0
var step = .1
var ystep = 0
var currStep = 0
var tAmpl=.1
var Xpos = 100
var Ypos = 325

<i> </i>// Properties needed to determine the content area dimensions.
<i> </i>var container, wp, hp
<i> </i>if (typeof window.innerWidth == "number")
<i> </i> container = window, wp = "innerWidth", hp = "innerHeight"
<i> </i>else
<i> </i> container = document[rootNameIE()], wp = "clientWidth", hp = "clientHeight"

<i> </i>addMouseMoveHandler(moveHandler)
<i> </i>setInterval(animateLogo, delay)

<i> </i>function moveHandler(evnt) {
<i> </i> Xpos = evnt.pageX
<i> </i> Ypos = evnt.pageY
<i> </i>}

<i> </i>function animateLogo() {
<i> </i> var yBase = container[hp] / 2
<i> </i> var xBase = container[wp] / 2
<i> </i> with (Math) for (var j = 0; j&lt;7; j++) {
<i> </i> var layer = document.getElementById("l" + j).style
<i> </i> var cs10 = currStep / 10, scs10 = sin(cs10), ccs10 = cos(cs10)
<i> </i> layer.top = (Ypos + cos(scs10)*yBase*ccs10*sin((currStep/1 + j*50))) + "px"
<i> </i> layer.left =(Xpos + sin((20*sin(currStep/20)))*xBase*ccs10*scs10) + "px"
<i> </i> }
<i> </i> currStep += step;
<i> </i>}
}
&lt;/script&gt;
I removed support for Netscape 4, I doubt anybody will care.
Copy linkTweet thisAlerts:
@Eep__authorJun 19.2007 — Thanks. That is almost it, except I don't think the mouse following ever worked in my version. While interesting, how would I disable that so the animation only occurs on the left or right side of the page?
Copy linkTweet thisAlerts:
@Eep__authorJun 23.2007 — Figured it out; uncomment these lines for it to animate on the left side only:

/* addMouseMoveHandler(moveHandler)*/

/* layer.left =(Xpos + sin((20*sin(currStep/20)))*xBase*ccs10*scs10) + "px" */


Oh and this line isn't necessary (since it prevents the scrollbar from appearing):

html,body { overflow: hidden; background-color: #000 }
×

Success!

Help @Eep__ spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...