• 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

Just to update you all on this, the issue has now been resolved by our developers and will part of the 1.2 update.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hey There,

 

The main thing with parallax is to make sure that your image's height is way, WAY larger than the size of the section you want the effect in, I recommend between 3x and 5x as big.  The effect you see on the workspace demo is actually the premium Depth Charge plugin integrated in.  

 

If you're looking for a more flexible way to integrate parallax, I recommend grabbing Depth Charge from the store.  It's an incredibly powerful section that will follow you into every design project you do.  

 

The other thing I'll say is that the parallax relies on the fixed navbar being the default height, if you adjust it at all that can throw off the calculations for the parallax effect.  

 

I realize that's not the most amazing answer but hopefully it at least points you in a workable direction.

 

James.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Very helpful info James.

 

To the original poster, I'll add that another option is to use a seamless, tiling pattern. That won't exhibit the mentioned problem. I do think big photos are sexier though. Hency why I came here for a solution the problem;)

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I understand what you mean webmatros, I use it for my own site as well (a color equal to my header at the bottom of the picture). but this is of course a workaround. I hope we will see a solution to the problem in the future :)

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

This isn't a known problem, as far as I am concerned what James wrote above is a perfect explanation, you will need to use an image that is going to be substantially larger in terms of height than the section that is going to house it. For example, if your section has content which causes that section to have a height of 1000px, you can't use an image that has a height of 1000px, as there is no extra space for the scrolling animation. So for something like that, you would probably want a height of about 1400px or over for a nice parallax effect.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

This isn't a known problem, as far as I am concerned what James wrote above is a perfect explanation, you will need to use an image that is going to be substantially larger in terms of height than the section that is going to house it. For example, if your section has content which causes that section to have a height of 1000px, you can't use an image that has a height of 1000px, as there is no extra space for the scrolling animation. So for something like that, you would probably want a height of about 1400px or over for a nice parallax effect.

Dannny

 

I have tried that and that is not working.  Could be me but I have tried large images.  I have used section areas that were set to have a height of 400 px tall and used a background image that had a height of 2800px and it still shows the bottom of the image at the top and then the beginning of the image.  No matter how large I make it, it still has the same issue.  I thought that maybe setting a height in the section area was causing the issue so I removed the height of a section area and then added the Splash Box section, which will only size based on the images for that section area.  The section area (with the Splash Box) has a height that is less than 450 and when I added the 2800px tall image, it still does the same thing.

 

If you have a site that you can allow access to that has this working, can I please see since I'm really anxious to see this work so I can use.  Have had about 3 clients sites (plus some I own) that I would love to use it in but just can't figure it out.  Wouldn't mind buying Depth Charge but since I know it's built into DMS, would love to use it! :)

 

James

1 person likes this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I think the problem could be solved, if the background image was vertically centered? Right now it's top-aligned.

 

What do you think?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I'm having the same problem. Has anyone managed a fix? webmatros"]'s suggestion of setting the image to center seems promising. Have you had success, @[member="webmatros?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

What is the solution of the problem?
"Buy additional plugin" is not the solution.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Can you all provide a link so we can see this issue, as I am not able to recreate the issue.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I'm having the same problem. Has anyone managed a fix? webmatros"]'s suggestion of setting the image to center seems promising. Have you had success, @[member="webmatros?

 

Nope. A few weeks back I tried, but couldn't make it work. Had trouble finding the right CSS selector, etc.

 

A super tall image 4x the height of the width is not a solution. It's a problem. A bandwidth problem;)

 

Centering the image vertically and offsetting it a little, so make room for the parallax effect to have some leeway to scroll on, seems the way to go.

1 person likes this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I have already reported this to our tracker.

 

 

A super tall image 4x the height of the width is not a solution. It's a problem. A bandwidth problem;)

 

hehe and yet you want to use a 16.2mb image on your site?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Is there a solution to this problem, yet?  I am seeing the same issue. 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi there, Danny's listed this on the tracker for the devs to review, any update to the code will most likely be included in the next release.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Looking for the solution to this as well. Makes parallax useless with a anything other than a pattern. :(

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Unfortunately, we are usually not informed when a specific fix is applied.  It is just done and included in the next release or, if it cannot be done, it simply isn't.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi Rob,

The only issue I find on the tracker is this one: https://github.com/pagelines/DMS/issues/259.

I'm not sure it fully describes the issue(s) reported in this thread (e.g. the "
the lower part of the picture is showing up on top") or elsewhere, what do you think?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

+1 Same issue here

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Just so everyone knows of an alternative, we had attempted to use depth charge as well but it didn't make the images show how we wanted and was having some weird loading issues for us. We ended up using the basic Stellar JS parallax script. Info at http://markdalgleish.com/projects/stellar.js/

1 person likes this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

same problem... even if the height is 50 px and the photo is 700 px tall... the top 25 px is the bottom of the picture, and the bottom 25px is the top of the picture.  :( 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Mark & Phil"] What are the exact image showing + loading issues you encountered with DepthCharge ? Did you contact @[member="etcio (developer)?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Erwan I can't recall what they were, that was 3 projects ago (about a month and a half ago). When we encounter issues again we'll be sure to document them.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I actually added -25px margin-top to LESS CSS and designated local class for page I was using parallax for and seems to be a quick fix :thumbsu:

1 person likes this

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