Howdy all Kirupa’ians, it’s been many a year since my last post on these forums. And I just noticed I first joined in 2004! How time flies. OK, on with business.
Long story short…
I fiddled with the code a little so it now scrolls horizontally. I’ve also removed the blurry_bg.jpg image from inside the parallaxContainer and added my own image as a CSS background. My content is responsive, so the width of site and the parallaxContainer are dependent on the browser dimensions. My content is 6 times the screen width. This is all fine. Here’s the problem…
If I try and make the parallaxContainer any smaller than 4 times the screen width (so the parallax is slower than the content), it doesn’t scroll all the way to the right. 4 times is fine, it starts on the left and ends on the right, perfect. But 3 times or less (which would give a better parallax effect), you can see it end half way through the site.
I’m a javascript beginner, so I’ve looked through the code to see where it could be going wrong, but I’m stumped. I know not having a live version for you to have a look at makes things difficult, but any advice on what you think it might be would be greatly appreciated.