Comments on: Parallax Backgrounds

By: Andreas Hopf

Sat, 20 Aug 2011 15:53:32 +0000

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!

]]>

By: Kevin

Mon, 06 Jun 2011 13:01:45 +0000

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

Thanks again – Kevin

]]>

By: Steve Ollice

Tue, 10 May 2011 16:45:04 +0000

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.

]]>

By: Rob

Sun, 13 Feb 2011 14:20:44 +0000

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?

]]>

By: Dirk

Wed, 18 Aug 2010 00:36:22 +0000

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

]]>

By: kremalicious

Fri, 23 May 2008 03:11:46 +0000

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/

]]>

By: mdm-adph

Fri, 23 Mar 2007 15:18:19 +0000

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

otherwise, works great!

]]>

By: Leland Scott

Fri, 23 Mar 2007 02:12:46 +0000

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!

]]>

By: Paolo Montrasio

Thu, 22 Mar 2007 19:22:54 +0000

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 🙂

]]>

By: Joshua

Thu, 22 Mar 2007 14:03:14 +0000

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..

]]>

By: sal

Thu, 22 Mar 2007 11:52:48 +0000

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

]]>

By: trice

Thu, 22 Mar 2007 06:28:48 +0000

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

]]>

By: Sid Bachtiar

Thu, 22 Mar 2007 01:20:57 +0000

That’s very cool! Quite inspirational.

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

]]>

By: schnuck

Wed, 21 Mar 2007 20:39:22 +0000

love it! now let’s do some experimenting…

]]>

By: Markus

Wed, 21 Mar 2007 19:07:02 +0000

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

]]>

By: jason

Wed, 21 Mar 2007 15:28:24 +0000

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

]]>

By: SmileyChris

Tue, 20 Mar 2007 19:06:32 +0000

Very cool, Brett!

]]>