Parallax Effect positions images too low

Hi there!

When I add a background image, and scroll down the page, all but one parallax bg image is being positioned too low.
The image top border is visible and a huge part of the white container background.
How can I fix this? ( example site: http://projekt-lattmann.saskialund.de )
This does not happen to the background with the div#pg-11-1 but all other parallax images I added in the other rows.
I formatted all of my row background images to 900x506.

Glad if someone could help!

Best
Saskia

Hi,

You just need images with a slightly bigger height. The parallax script’s speed is different then the scroll speed and your images are smaller than the actual row, that’s why those gaps show up.

Alternatively you can add this to stop the parallax from being js-powered:


.panel-row-style {
    background-position: center !important;
}

Hi Vlad,

thx for the hint. I was already working on higher versions of the bg images. What kept irritating me was that that one background image with same dimensions wasn’t showing this whiteness on top when scrolling down.

I will get back here when I uploaded the versions I just saved from photoshop

Yeap, although your images have the same dimensions, your rows have different heights.

Ok back…

hm. I exchanged the two background images that were showing this behaviour and it is still there. I deleted my browser cache. Still there.

Weird. The new bg images’ dimensions are 1186x938
But that gap is showing at the exact same position. I have the strong feeling that it doesn’t matter which height my images have… there is something affecting the bg positioning of the images in relation to the containing div… maybe there is something in the jquery?
the thing is… you’d expect that higher images would be vertically center focussed. and thus the viewport would center according to the height and width of the containing container. So of course if you scrolled downwards, the viewport moves up on the image.
But from the start the bg img is positioned too far down…

Vlad, what would you recommend to use for the background image pixel dimensions? the viewport is 526px or something like that in height.

Hmm, I can only assume that it’s because your image are too close to being a square. For example on our demo page we have one background image which is 1280X850. Could you try that?

There are solutions even if that doesn’t work. You can either use the code I posted above or you can decrease the parallax speed.

Here’s a direct link to that image in case you want to try it out.

Another edit:
I can confirm that the top image border becomes visible no matter which height the image has.
Just uploaded another set of imgs with height of 1354px / same width as above.

Hm… how can I solve this?
Theborder appears at the same scrolling screen point so to say… at all three different heights.

EDIT:
Ok will try the suggested dimension then.

No change int he behaviour when using the demo image size.

Really weird.

The calculation of the y-value is just wrong for these images. x is fixed to 50% which is fine-- but then jquery takes over the y-value.
No idea how to solve this… my jquery knowledge is real basic.

Yeah, that’s the whole point - the jquery should take over the y value. Why it miscalculates in your case I have no idea.

Anyway, this should probably do it, if it doesn’t the only option is the use the code I first posted:

  • open main.js, find .parallax("50%", 0.3);, change 0.3 to 0.1,
  • copy all the contents of that file, minify it and then paste it in main.min.js.

Thanks, Vlad!
That solved it.

I was looking in the wrong file where the source code that belongs to the parallax script is located (scripts.js line 56), instead of the main.js :smiley:

If I had looked into main.js first I had played around with that value before asking… lol. I was just overwhelmed by trying to understand the parallax script, hehe

MAny thanks once more!

P.S.: Try out Smaller App for Mac. You can simply drag and drop a .js , .css etc file onto it and it will auto-minify and save the .min.js file into the same directory where your dropped file is sitting.

Actually I modified it again a tiny bit to get 100% rid of the white space:

.parallax("50%", -0.1);

negative value solved it. And the effect it creates is quite nice too.

Thanks one more time for point that line out!

Hm… on 24’’ screens the white background appears again. it is really weird.

I tried to check on the website of the source code developer Ian Lunn. But he states that he does no longer maintains the plugin: http://ianlunn.co.uk/articles/recreate-nikebetterworld-parallax/

Instead he recommends using one of the following jquery solutions:
http://prinzhorn.github.io/skrollr/ or
http://scrollmagic.io/ or pure css
http://keithclark.co.uk/articles/pure-css-parallax-websites/

will try and find out if I can somehow fix this

Update:
Ok well there seems to be a fix for this issue. someone posted it on github. But it has not been implemented yet.

Btw, this behaviour also happens in your Demo, Vlad.

Please open your demo site with screenfly and choose 24’’ desktop screen.
(in case you dont have a 24’’ to try it on)

You will see that the second parallax bg is showing white background at the bottom of the screen when you scroll upwards.

This should only happen if there are more than 1 parallax bgs in one page.
You can see the github fix here:

That fix is already included in the script. To be honest I never wanted js-powered parallax effect but the designer included it and people like it.
Why don’t you try the first code I posted? It should make all possible issues go away.

you mean the CSS? bg center?

I’ll give it a try

Ok well this of course removes the parallax js effect of moving as well. But it is a fix XD

Thank you! Will use that. I am good with pure css bgs.

I was seeing the same problem. If the page reloads while scrolled, the first image in the slider will be correctly positioned but the second and subsequent images will be positioned with their tops aligned with the top edge of the window. Then, when you scroll back to the top of page, the parallax effect adjusts them down and the white background appears.

I think the culprit is the jQuery offset() function returning the wrong value. This seems to be because slider images other than the 1st have had their css display property set to ‘none’ by the superslide script before the parallax script is called for the first time.

My solution was to edit the Parallax function in scripts.js and replace the following section:

l.each(function(t,e){
    $element=n(e),
    $element.data("firstTop",$element.offset().top)
})

with code that temporarily sets the display property to ‘block’ before calling offset() and then reverting it back to its previous value:

l.each(function(t,e){
    $element=n(e),
    old=$element.css('display'),
    $element.css('display', 'block'),
    $element.data("firstTop",$element.offset().top),
    $element.css('display', old)
})

(I’ve added indentation to make it easier to read)

Hope this is useful - it seems to have solved the problem for me.