17 thoughts on “Parallax Backgrounds

  1. SmileyChris

    Very cool, Brett!

  2. This is friggin awesome! I want to redesign my blog as an 80’s side-scrolling game now. haha. Simply amazing.

  3. Not far away from actually implementing a parallax shooter, ey? Reminds me of Katakis and Turrican 😉

  4. schnuck

    love it! now let’s do some experimenting…

  5. Sid Bachtiar

    That’s very cool! Quite inspirational.

    Anyway, I’ll be working across the street from Natcoll starting from next week. Might see you around.

  6. trice

    Didn’t seem to work for me (using MAC – OS X 10.4.9 and FF 2.0.0.2), sorry…

  7. sal

    Nice to see an nzer while flicking through link lists.

    trice: Seems to work for me, although not as fluidly as it’s probably supposed to. I’m same setup as you, tried in both Opera 9.1 and FF 2.0.0.3

  8. Hold up.. IE > Tools > Internet Options > Settings > Check for new versions: “Every visit to the page”… breaks the hell out of it. Images can’t load fast enough and then the JS break (presumably cause it doesn’t reload with scrolling either). Will def need something a little more robust for use..

  9. Paolo Montrasio

    It works with IE 6 on WinXP but I get an error Invalid argument, line 65, char 3 after scrolling the page for a few seconds.
    Anyway, it’s a very nice hack 🙂

  10. Wow! Way kewl, man. I can see it would be very easy to get dizzy from this! 🙂 Great job thinking outside the box and coming up something totally new. Works great in Safari!

  11. works in Opera 9.10 for me, as long as you scroll really slowly… :p

    otherwise, works great!

  12. even more than 1 year after you’ve posted this article and demo i have to say: awesome!
    I’ve included your example in my showcase article about various websites using the parallax effect done with css):
    http://www.kremalicious.com/2008/05/showcasing-the-css-parallax-effect-12-creative-usages/

  13. Dirk

    Hi!

    Really appreciate your script. finally something working without java and without needing to resize my window… Thanks!

    I’m trying since 2 hours and don’t seem to find the answer
    how to make this work for X-axis…
    Is there any way?
    Please let me know.
    Cheers, Dirk

  14. Rob

    Hey guys,

    trying to get this working, but on scroll the image jumps down 50px then scrolls up…

    here’s what I have:

    function calcParallax(tileheight, speedratio, scrollposition) {

    return ((tileheight) – (Math.floor(scrollposition / speedratio) % (tileheight+1)));
    }

    window.onload = function() {

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

    var ground = document.getElementById(‘ground’);
    var groundparallax = calcParallax(50, 12, posY);
    ground.style.backgroundPosition = “0 ” + groundparallax + “px”;

    document.getElementById(‘javascriptcode’).style.backgroundPosition = groundparallax + “px 0”;
    }
    }

    any ideas?

  15. Hello Brett! Four years later and your blog post holds up! I tweaked some of your parameters and added a few layers, and came up with a unique example. Check out my fishing portfolio.

  16. Kevin

    Thanks for the script. Awesome! I’m also wondering if it’s possible to make it scroll horizontally.

    Thanks again – Kevin

  17. Andreas Hopf

    At last, no jQuery etc. in sight, just plain JavaScript… great! The real fun with this starts when you specify negative numbers for “speedrato” for all or some backgrounds on a multiple background setup, especially if one half of a website is travelling upwards, the other half downwards… In any case, thanks for making your script available!

Comments are closed.