Javascript questions which don't deserve their own thread.

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > Javascript questions which don't deserve their own thread.

Soks: Apr 1, 2006; lol internet

I posted the following in the PHP thread:

Soks posted:

Anyone have any ideas for making an image scroll in the background slower than the rest of the page? I'm trying to make a neat 3D effect where instead of just having a static background and a foreground that scrolls normally, I want the foreground to scroll normally and the background to scroll slowly and in relation to the length of the page.

The idea is that the page is made up of a header, 3 columns, and a footer. The left column is navigation and it looks like a tree, the right column is just a sliver of another tree, and the center column is where the content goes. It has a big 1000px by 2400x px canopy picture as it's background. This canopy picture is currently just static, with only the top 1000-1200px showing. I want this image to slowly scroll while the columns and the content ontop of the canopy (in semi-transparent background divs) scroll normally. By the bottom of the page, the bottom 1000-1200px would be showing and the top of it would be hidden. It would also have a minimum scroll setting so that it wouldn't scroll too fast on shorter pages.

I'll post up a diagram of what I mean when I get home. I don't even know where to start with this, I'm new to php so I don't know if it even has the capabilities to do something like this, maybe JavaScript? I just don't know. Could someone point me in the right direction?

And I was redirected here. But before I came here I managed to actually find and implement a script that does what I want, seen here:

http://inner.geek.nz/javascript/parallax/

And my implementation is here:

http://www.cyf.mylha.com/index.php

But this effect is very choppy in Firefox and Safari. It runs pretty smoothly in IE and even better in Chrome, but I really need a way to smooth this out for Firefox/Safari. Here's the code:

code:

function calcParallax(tileheight, speedratio, scrollposition) {
  return ((tileheight) - (Math.floor(scrollposition / speedratio) % (tileheight+1)));
}

window.onload = function() {

  window.onscroll = function() {
    var posY = (document.documentElement.scrollTop) ? document.documentElement.scrollTop : window.pageYOffset;

    var container = document.getElementById('container');
    var containerparallax = -calcParallax(2300, 1.2, posY);

    container.style.backgroundPosition = "0 " + containerparallax + "px";
  }
}

I don't know JavaScript, but I was able to bumble my way around the code just fine. I just have no idea how this could be smoothed out, or why it's choppy in the first place. The artist is currently drawing up a 1000x2400px canopy for use with this script, so I'd like to get this working, but if I can't I'll just set it to fixed and be done with it. If I could just get it to work at least as smooth as it is in IE I'd be happy with it.

Also yes I know the pictures are blurry, the artist I'm making the site for is working on high res versions of everything and a new canopy (much better than my badly photoshopped one :v).

Soks fucked around with this message at 19:03 on Nov 24, 2009

# ¿ Nov 24, 2009 18:53

Adbot: ADBOT LOVES YOU

# ¿ May 18, 2024 05:46

Soks: Apr 1, 2006; lol internet

Nigglypuff posted:

Sorry to not be more helpful!

No, thanks a lot. This is exactly what I was imagining was going on, I even thought of trying to rewrite the script to check for scrollY but I had no idea what scrollY was called, I don't have any Java Script experience. You saved me the trouble of looking up and writing such a script.

peepsalot posted:

position:fixed

I tried this before, the results were just as choppy (though smaller chops!) and produced some other odd alignment bugs. If I could fix the alignment bugs it was causing, I would use this, but I'd rather focus on trying to find a solution to the choppiness for now.

Thanks alot guys, I'll keep looking around for a solution.

# ¿ Nov 25, 2009 20:20

Soks: Apr 1, 2006; lol internet

I was just considering almost exactly that. :psyduck:

Would there be a way to emulate additional onscroll events if the scroll bar was made in Java or something? I don't know. I'm just brainstorming, I think I need to pick up a Java Script book or something.

Soks fucked around with this message at 21:42 on Nov 25, 2009

# ¿ Nov 25, 2009 21:28

Soks: Apr 1, 2006; lol internet

Yeah, no. :v Is there a way for Java Script to get the entire length of the page, and then is there a way to catch mouse wheel input other than onscroll?

# ¿ Nov 25, 2009 21:41

Soks: Apr 1, 2006; lol internet

rt4 posted:

If you're thinking what I think you're thinking, then just use percentages instead.

Yeah, exactly! But it has to have a minimum speed somehow... Otherwise the background image will scroll hilariously fast on shorter pages.

Edit: Oh I see what you meant. Yeah, if not for that worry about speed, I could just use percentages.

Soks fucked around with this message at 21:56 on Nov 25, 2009

# ¿ Nov 25, 2009 21:52

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > Javascript questions which don't deserve their own thread.