Jump to content

Archived

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

davemoppert

Setting Parallax backgrounds to canvas located the content area does not work

Recommended Posts

davemoppert    6
davemoppert

Welp - I have been trying for the last 3 or so hours to get the background images to parallax. It seems like it will work if the canvas areas I am trying to set the Parallaxing background to are in the footer area - but not in the page template's content area for some reason. Any idea how to get parallaxing backgrounds to work in the content area of the page template? - I don't want these sections on every page globally.

 

Thanks,

 

- Dave

Share this post


Link to post
Share on other sites
jmad+    80
jmad

What have you done so far?    Do you have a link?

 

This doesn't give you the cooler...slightly moving effect but you could use the code below.  That will make your section background stay put while the text or whatever scrolls.  Check it on mobile though to make sure it still sizes okay.

 

#pl_areaYOURAREAIDHERE {
  background-attachment: fixed;
}
  • Like 1

Share this post


Link to post
Share on other sites
davemoppert    6
davemoppert

Here is the site I am referring to: http://new.promontoryclub.com

 

Here is what I am doing: 

 

Step 1: put a new canvas area in the content area of the page template. 

Step 2: Assign a background image (jpg or png) to the canvas area.

Step 3: Change the Area Styling > Scrolling effects and sizing to Parallaxed background image.

Step 4: Save settings. 

Step 5: Refresh the page after seeing the green dot. 

Step 6: Curse at the site cause it doesn't work. Check settings and they are saved properly. Left scratching head and frustrated. 

 

BUT - if I do the same exact steps but put the canvas area in the Footer or Header area - it works fine. 

 

The problem with adding it to the Footer is I don't want those sections to display globally throughout the site. I only want them to display on the home page. 

 

This has got to be a bug that others are having as well. I get the same results on 2 different websites I am building. Any idea when this bug will be fixed? 

Share this post


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

Hi Dave,

 

So after viewing your site, am I right in assuming that you all those Canvas areas with the background images are supposed to have a parallax effect ? If this is the case, I have already reported this to our tracker. It would appear that if you have more than one Canvas section active on your template/page and each of them are configured to use the parallax effect, the effect only works on the first Canvas area and not the others.

 

 


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
davemoppert    6
davemoppert

Hey Danny - Yes that is correct.

 

I actually put them all in the footer area so that I can show a client how it is going to work for a meeting I have with them this morning. So if you go to the site you will see that the first few sections actually perform the parallax as they are supposed to. After the meeting I will move those sections to the content area again so we can troubleshoot this issue. Thanks. 

Share this post


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

I have reported the issue regarding multiple parallax canvas areas not working. However, you can't really have a parallax effect work correctly in the Footer area, as you need to scroll for the effect to work. If you can't scroll it won't work either that or you will need to have a lot of content in your footer area for the effect to take place.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
davemoppert    6
davemoppert

Thanks Danny.

 

Yes - I know that the the Parallax does not work effectively in the footer -- but it works better than in the content area (which it doesn't work at all in). The meeting was successful, but now the canvas areas have been moved back to the canvas area - and do not work as they should. I had to move them out of the footer because I do not want those sections to be visible on any other pages. Hopefully this can get resolved quickly because that feature is one that my client was extremely excited about. 

 

From what I was able to troubleshoot - it doesn't matter if there are multiple parallax canvas areas. It still doesn't work if there is only 1 parallax canvas area that is inserted into the content area of the template. Hopefully this helps, so you can update your report to the tracker. 

 

Thanks so much for reporting this to your tracker. Let me know if I can be of any additional help to get this issue resolved. Is there any way I can be notified when this is resolved? 

Share this post


Link to post
Share on other sites
jennajonesdesign+    15
jennajonesdesign

jmad that little piece of code for the fixed background was a life saver for me! Exactly what I was looking for! Solves it for me. This site is still in the beginning stages, but I think it is going to sweet! http://www.tsreclaimedlumber.com/

 

Thanks for sharing that code. 

Share this post


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

davemoppert

 

Can you please disable all plugins and remove all custom code you may have added and see if this resolves your issue please. As our developers have viewed the bug report I made and they can not reproduce the issue. They added multiple canvas areas and they all worked.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
davemoppert    6
davemoppert

Thanks Danny, but I already troubleshooted using these techniques before posting the problem - regardless, I decided to create a fresh wordpress and pagelines install and try to re-create the page testing for the Parallax issue as I added more content. This is what I found: 

 

The page template has a RevSlider as the first section on the page template and the settings were set to 'Set to full window height'. That was causing the issue with the parallax backgrounds not working -- or so I thought. When I deactivate the 'Set to full window height' setting in the Rev Slider, the first canvas area after that sort of parallaxed about halfway up the page and then stopped. The remaining canvas areas were static. 

 

Then, I decided to just move the RevSlider down past the canvas areas I want to parallax... after doing this, I noticed the first three canvas areas parallaxed until I scroll to about halfway through the second canvas area -- then it goes static (even though I know there is more to the image) the remainder of the canvas areas stayed static. 

 

It seems like all of the canvas areas are referencing one set height to scroll or something. It's weird... Does the parallax function reference the canvas area height that it's been assigned to OR (what I'm starting to suspect) the content area height to perform it's function? 

Share this post


Link to post
Share on other sites
davemoppert    6
davemoppert

It's almost like the parallax works but only until you scroll past the the point that displays initially (the fold). 

Share this post


Link to post
Share on other sites
davemoppert    6
davemoppert

Danny or anyone other staff with Pagelines -- still haven't heard back about this issue. What's the story?

Share this post


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

davemoppert - Can you create a page with only canvas sections using images and the parallax effect, so our developers can take look please. As, none of them are able to recreate the issue. When they add multiple canvas sections using the parallax effect, the effect works on all areas as intended.


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
    • Bill Deignan
      By Bill Deignan+
      does the LAX extension provide a parallax option? 
×