Jump to content

Archived

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

crunchnet

Parallax Scrolling Issue After Upgrade

Recommended Posts

crunchnet    0
crunchnet
HI there,
 
First play with DMS 2 and I wanted to upgrade our sister company, flamingpaper.co.uk. Most things went well and after some tweeking the website is back online. If you visit the website you will see the section at the top (where the main video is) is a parallax background. Scrolling down you'll see the top of the image get repeated as you scroll past it. I know this used to be a problem with DMS as well but I was using the following CSS to fix it:
 
/* correct-paralax */
.correct-background-parallax .pl-area-wrap {
  background-attachment: fixed;
}

After the upgrade, however, that no longer seems to work.

 

Can anyone suggest to me how I could go about solving this problem. The main issue is when it happens further on down the page so I have had to set these as static backgrounds for the time being. 

 
All the best,
 
Steve

Share this post


Link to post
Share on other sites
greenfly    230
greenfly

could we have a screen shot of your settings for the header please?


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
crunchnet    0
crunchnet

Is anything happening with this? It's still not resolved?

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

As far as I can tell there is no issue, the problem is your image simply isn't large enough. The reason as to why the image is being repeated is because the area that the image has been placed in, is larger than the image itself, so it has to repeat itself. Use a larger image one that has a height greater than the area you're adding it to and this will resolve your issue.

 

For example, the section that houses that image has a height of 1042px yet the image only has a height of 714px, so you see the image has to be repeated to fill the void. If you used an image that has a height of 1800px then there will be no issue.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
crunchnet    0
crunchnet
Why was this not a problem in DMS1 then?

Share this post


Link to post
Share on other sites
jmad+    80
jmad

Danny

 

I think the issue with parallax is that DMS isn't doing the basic background fixed image and scaling on mobile/smaller screens.  That's what users are wanting....The parallax DMS has implemented requires crazy large photos for the "basic" option to work correctly.  

Share this post


Link to post
Share on other sites
crunchnet    0
crunchnet
Actually, my issue is that what was working perfectly in DMS1 is not working perfectly in DMS2, even though we were promised it would be a seamless upgrade. It hasn't been and it's left me wondering if this thing, that I pay $30 a month for is really the best option for my business.

It's a simple issue yet there is no fix for it (even a hack would be welcomed) and no explanation as to why it's been altered since DMS1 or if anything is going to be done about it.

I'm pretty angry to be waiting since April 1st for a reply only for that reply to be "it's not our fault". Well, I'm sorry. It IS your fault. YOU changed the system and it broke my website.

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

Not sure what both of you're referring to, I have just used your same image in both DMS 1.1.1 and DMS 2.1.1 and I get exactly the same result. In order for Parallax to work, you need to use an image that is larger than the area you're placing it so it has room to do the parallax effect. If the images height is less than the area it is being placed into, then the image will be repeated.

 

DMS 1.1.1 - http://quick.as/9Q84Hq5p

DMS 2.1.1 - http://quick.as/7b8YfxVw

 

DMS 2.1.1 without the video so the height of the area is less than the height of the image = no issue - http://quick.as/jbz9fy8D

 

crunchnet - What version of DMS 1.x were you using and how did it look, can you provide a screenshot or video, as I am not sure how this would have worked in DMS 1.x ?

 

Also, if you want to remove the cover value for the property background-size, you can use the following CSS:

 

#pl_areauxli82.pl-bg-cover {
background-size: auto;
-webkit-background-size: auto;
}
 
This will use the default value of the browser. However, your image is still too small even for this to work and will repeated both left, right and bottom.

Please search our forums, before posting!

Share this post


Link to post
Share on other sites

  • Similar Content

    • flourishdesignstudio
      By flourishdesignstudio
      Hi,
      I am having an issue with the Lax sections on Platform 5. I can embed a widget or text box into a Lax section which is really neat, but the image in the background (the parallax image) seems to get stretched and doesn't scale in an attractive way.  For example, the page http://ed6.61e.myftpupload.com/#clients has a parallax section with a woman's face  and I thought is would scale as the browser window gets smaller but the zoom-level never changes. Also, the amount of parallax shift seems more dramatic than what we want. I thought that if I uploaded a shorter image it would scan/scroll less since the height from the image's top to bottom would be less. However, that doesn't seem to have any effect and I am at a loss of how to properly control the way the image is displayed within that box. Any thoughts, tips, or suggestions to get me pointed in the right direction?
      Thanks so much for the help!
    • globalnative
      By globalnative+
      Hi there! 
      I'm wondering if I can and how I can easily make a one page scrolling parallax site with menus which scroll rather than take me to a new page?
      Something like this: http://demo.vellumwp.com/home-pages/one-page-resort/.
      Thank you kindly
      Nate
      PS: my site: http://natemaingard.com
    • janessa_cotugno
      By janessa_cotugno+
      Hey,
      I've made a simple landing page for a friend, and while the parallax feature looks great on desktop, it resizes (zooms way in) the image on the mobile version and it looks really bad. When it first pulls up, the image looks like the correct size, but once I try to scroll on my phone, it zooms in the image and seems to have a slight parallax effect. 
      There are two separate sections that have a background image on the canvas with the "Alternative Parallaxed Background Image" effect. I was thinking that I could just disable the parallax on the mobile version only, but I haven't had success in figuring it out.
      Ideally, on the mobile site, I would like the background images to fit the full height of the screen instead of zoomed in so much. 
      Any suggestions? 
      Here is the site for reference: www.sweetnectarkirtan.com
      Thanks!
    • floydwebb
      By floydwebb+
      The parallax and hero sections are jumping to the top of the template in PL5 See  here http://screencast.com/t/TLajih8MEM6
      No matter what I do, clear browser cache, whatever. The Parallax with the embeddded Hero section will ot stay on the bottom of the page above the footer.
      Help, please. This started happening at the worst possible time, when I was in a client meeting walking here through the site that is already LATE. 
      Floyd Webb
×