• 0

Parallax Full width Section problem, lower part picture showing on top


Question

Posted · Report post

Hello,

 

I love the parallax option for the full width section. But unfortunately it will not work properly on my websites. I made an example here. Images used as comparison: lake & elephant.

 

As you can see in the example, the lower part of the picture is showing up on top of the picture on default.

 

Is this a known problem? An example site suggested bij Pagelines DMS: http://www.johntindel.com/ has the same problem (with the wooden background).

 

On the other hand, the workspace themesite built does not have this problem: http://workspace.usingpagelines.com/

 

Is there a sollution to this problem? 

Share this post


Link to post
Share on other sites

49 answers to this question

  • 0

Posted · Report post

Awesome, Danny, thanks for that. Do you have the link to the commit by chance?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Cool!

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi Danny,

 

I copied the 1.2 code to the current release version of DMS on this site http://www.panassembla.com.

The bottom part is indeed not visible anymore at the top of the section area. As far as I can tell from the line of code that I copied the image is now positioned at 0. I think this might cause a slight problem when your pulling up too much. Because of the bounciness of the parallax effect you will then still start seeing the bottom part of image. So to provide for proper elasticity I would suggest setting the offset to something like -10px (or as much as you can 'bounce'). Or make it user definable.

 

I'm hoping I'm clear enough ;-)

 

Best, Jan

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi Jan,

 

You're going to need to add another section to that area, at the moment there isn't enough height/content to increase the height of the area you have the parallax on.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Ah okay Danny, good to know that that can solve it. Thanks!

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Did you check, as thats what I got from looking at it, what I did was copy the code for that Slabber Text section and then added it again underneath the Slabber Text section, so I had two of them, thus increasing the area size which displayed more of the image.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi Danny, No I did not check it yet. But what I just noticed is that it only happens in Chrome that you see the bottom of the image at the top. This has to do with the fact that Chrome has this top of page bounciness where you see a bit of canvas. When that happens the image reveals part of the bottom. With Firefox, top of page is top of page so the image just stays at position 0 instead of revealing -10px. Curious if you can reproduce this. So my problem is not that I need to have more image visible.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Oh hang on, are you referring to Chrome revealing the bottom of the image when you use the fast scroll up, which gives you the elastic effect ?

If so, I don't really see that as a problem to be honest. However, I can report it for you.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Yeah, I don't think that is an issue, well for me anyway. However, I will bring it to our developers attention and see what they say.

 

Can you keep that page, active as I will use it for a demonstration.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi Danny,

 

I agree, maybe not really an issue,but with everything going 'touch' and elastic it could aesthetically be a small nuisance. If you know how to offset the background via CSS it would be great if you posted it. I've not been able to get a CSS correction working with parallax. Maybe because it's js.

 

Thanks, Jan

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I've already reported to our developers, if I hear anything I'll reply here.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Great thanks!

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

You could just use CSS to turn off background repeat. Allowing the site to be scrolled in a negative direction is a browser specific function, not part of the standard.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Any update on this issue. I've again recently tried the Parallax and the image position was half way down giving an unsightly parallax. We need to be able to set the start position (and even better end) of the parallax background image.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

glennyboy Are you using DMS 2.0 ?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Just switched - haven't used it test as I'm firefighting loads of other new issues... 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Can you let us know how you get on when testing this. Are all your other loads of issues logged as topics?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I am using DMS 2.1.5 and I am still having the issue everyone is describing. =(

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

jennajonesdesign - The parallax image repeating your image as been resolved. If you're still encountering this issue, then the container you have your image in, is larger the in terms of height that your image, so it will repeat itself. If you provide a link to the page in question, we can take look for you.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Having an issue, background image will not parallax, centers the image in the middle.

 

http://www.outdoorsignaturetest.com

 

It's in the Hero Section toward the bottom. Have attempted to use a much taller image that simply loads to show top of photo, with no parallax, this one is centered and will not parallax.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

goingnutts - You have a jQuery issues related to the Carousel used on that page. Once this issue has been resolved which is likely caused by you not configuring the section correctly, your parallax effect should work.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now