Jump to content


Photo
- - - - -

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

parallax Full Width section pagelines dms picture

Best Answer Danny , 05 January 2014 - 01:03 PM

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

Go to the full post


  • Please log in to reply
45 replies to this topic

#1 opwolken

opwolken

    Member

  • Members

  • 19 posts
  • Framework Version:DMS 2.0
  • Country: Country Flag

Posted 06 September 2013 - 11:08 AM

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? 



#2 James Giroux

James Giroux

    Super Member

  • Members

  • 123 posts
  • LocationOttawa, Canada
  • Framework Version:Developer
  • Country: Country Flag

Posted 08 September 2013 - 12:11 AM

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.



#3 webmatros

webmatros

    Member

  • Members

  • 19 posts
  • LocationCopenhagen
  • Framework Version:DMS latest
  • Country: Country Flag

Posted 16 September 2013 - 09:50 PM

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;)



#4 opwolken

opwolken

    Member

  • Members

  • 19 posts
  • Framework Version:DMS 2.0
  • Country: Country Flag

Posted 18 September 2013 - 09:44 AM

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 :)



#5 Danny

Danny

    Is Awesome!

  • Moderators
  • 13021 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 22 September 2013 - 12:19 PM

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.

#6 atcdomainsolutions

atcdomainsolutions

    Super Member

  • Members

  • 150 posts
  • LocationSeattle, WA
  • Framework Version:DMS
  • Country: Country Flag

Posted 22 September 2013 - 05:46 PM

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



#7 Danny

Danny

    Is Awesome!

  • Moderators
  • 13021 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 23 September 2013 - 09:36 AM

I am not able to recreate the issue unfortunately. Check my test here - http://dms-test.flywheelsites.com/

#8 atcdomainsolutions

atcdomainsolutions

    Super Member

  • Members

  • 150 posts
  • LocationSeattle, WA
  • Framework Version:DMS
  • Country: Country Flag

Posted 23 September 2013 - 05:23 PM

I am not able to recreate the issue unfortunately. Check my test here - http://dms-test.flywheelsites.com/

Danny

What is your testsite's password?



#9 webmatros

webmatros

    Member

  • Members

  • 19 posts
  • LocationCopenhagen
  • Framework Version:DMS latest
  • Country: Country Flag

Posted 28 September 2013 - 08:37 PM

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

 

What do you think?



#10 bhowton

bhowton

    Advanced Member

  • Members

  • 58 posts
  • Country: Country Flag

Posted 07 October 2013 - 04:33 PM

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, @webmatros?



#11 layasamadhi

layasamadhi

    Member

  • Members

  • 29 posts
  • Country: Country Flag

Posted 08 October 2013 - 05:10 PM

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


#12 Danny

Danny

    Is Awesome!

  • Moderators
  • 13021 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 09 October 2013 - 12:36 PM

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



#13 webmatros

webmatros

    Member

  • Members

  • 19 posts
  • LocationCopenhagen
  • Framework Version:DMS latest
  • Country: Country Flag

Posted 14 October 2013 - 09:02 PM

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, @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.



#14 Danny

Danny

    Is Awesome!

  • Moderators
  • 13021 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 15 October 2013 - 10:20 AM

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?



#15 sethoof

sethoof

    Advanced Member

  • Members

  • 61 posts
  • Country: Country Flag

Posted 21 October 2013 - 06:37 PM

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



#16 James B

James B

    Advocate

  • Moderators
  • 4979 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 22 October 2013 - 01:23 AM

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.



#17 Mark & Phil

Mark & Phil

    Advanced Member

  • Members

  • 69 posts
  • LocationPoughkeepsie, NY
  • Framework Version:1.1.1
  • Country: Country Flag

Posted 03 November 2013 - 03:54 PM

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



#18 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 03 November 2013 - 04:43 PM

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.



#19 Erwan

Erwan

    Super Member

  • Members

  • 193 posts
  • Framework Version:Framework 2.4.4 - DMS 1.1.6 & 1.2
  • Country: Country Flag

Posted 05 November 2013 - 10:44 AM

Hi @Rob,

The only issue I find on the tracker is this one: https://github.com/p.../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?



#20 glennyboy

glennyboy

    Super Member

  • Members

  • 152 posts
  • Country: Country Flag

Posted 28 November 2013 - 11:57 AM

+1 Same issue here







Also tagged with one or more of these keywords: parallax, Full Width section, pagelines, dms, picture