Jump to content

Archived

This topic is now archived and is closed to further replies.

opwolken

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

Recommended Posts

opwolken

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
James Giroux

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.


James Giroux, CEO
Groundwork

Share this post


Link to post
Share on other sites
webmatros

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
opwolken

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

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
atcdomainsolutions

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

Share this post


Link to post
Share on other sites
webmatros

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
bhowton

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
layasamadhi
What is the solution of the problem?
"Buy additional plugin" is not the solution.

Share this post


Link to post
Share on other sites
Danny

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


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
webmatros

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.

Share this post


Link to post
Share on other sites
Danny

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?


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
sethoof

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

Share this post


Link to post
Share on other sites
James B

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.


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
Mark & Phil

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
Rob

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.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
Erwan

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
Mark & Phil

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/

Share this post


Link to post
Share on other sites
seventhsite

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
Erwan

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
Mark & Phil

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
agent654l

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:

Share this post


Link to post
Share on other sites

  • Similar Content

    • Steve Webb
      By Steve Webb+
      I am having an issue with DMS editor not loading.  Just keeps spinning and spinning.
      Have tried several things - Logged in and out, cleared cache, deactivated all plugins, but the issue persists.
      I even had our host restore from a backup a few weeks ago, when I know it WAS working, as I edited a text box on the homepage.  The restore from backup didn't help either.
      Also, the front end of the site shows that the site is framed, or boxed now (whatever you call it), instead of full width as it was previously (last week).
      Dev console shows that there are php errors in Google maps - file is attached.
      Can someone please help?  Not sure what else I can do here...
      Thanks in advance.
      -Matt

    • tuciudadenred
      By tuciudadenred+
      Hi everyone, what happens is that the web page metrosalarmas.com has a google tags which I have not attacked where I can look to remove those tags and be able to locate the correct ones.
    • Steve Webb
      By Steve Webb+
      I am having an issue with DMS editor not loading.  Just keeps spinning and spinning.
      Have tried several things - Logged in and out, cleared cache, deactivated all plugins, but the issue persists.
      I even had our host restore from a backup a week ago, when I know it WAS working, as I edited a text box on the homepage.  The restore from backup didn't help either.
      Also, the front end of the site shows that the site is framed, or boxed now (whatever you call it), instead of full width as it was previously (last week).
      Dev console shows that there are php errors in Google maps - file is attached.
      Can someone please help?  Not sure what else I can do here...
      Thanks in advance.
      -Matt

    • JawDesigns
      By JawDesigns
      Hi everyone,
      Flywheel have reported errors on my clients site 'www.racewaredirect.co.uk' and it's not loading. Can someone please provide some information on how to fix this? The site has never experienced these issues before.
      Thanks,
      James Wilson
×