• 0

Parallax & Text animation

Question

Posted · Report post

In a full width section, I have tried 5 different images with parallax.  When I scroll to the top of page the bottom edge of the photo shows in the top 30px or so and the rest of the photo is below.  Am I doing something wrong?  The last two photos I tried are very large 5000X5000 linked through Library, the first few were direct uploads.

Share this post


Link to post
Share on other sites

16 answers to this question

  • 0

Posted · Report post

Hi jmad

Please, you can try add to Custome Code

.pl-area-wrap {background-attachment: fixed;}

This resolve the problem to me.

 

Then if this work, you can do this

Replace the previous code for 

.batman-background-parallax .pl-area-wrap {background-attachment: fixed;}

then add to styling class at the image you want

batman-background-parallax

 

;)

1 person likes this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi jmad - Are you inquiring about a store product or a PageLines option?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

PL Option.  I have the fullwidth section with a background image, when I check the enable parallax the problem occurs.  site is http://msdbuild.com

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi, Have you removed the parallax image ?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Yes, but I just put it back up.  Is there a way to control the direction or speed of the parallax.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I don't believe so, but could well be wrong.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

So how do I correct the parallax issue with the photo bottom showing at the top?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

This looks promising!  I'll keep you posted.  Still trying to work out an ibox formatting issue tonight hopefully then will tackle this more. 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

It cost me more than one night to solve.
:geek: 
I hope to help you, you tell me if you resolved the problem.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

As far as I can tell, your issue is related to the fact that you have changed the height of the Fixed Nav, which throws off the calculation of the parallax effect and also, your image is squared 5000x5000. Try using an image, that has a greater width than the height i.e. 2000x1000.
 
I have no such issue here - http://dms-test.flywheelsites.com/
 
Username = flywheel
Password = omfgwtfbbq

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Danny- I changed it to a photo with 2880 × 1920 but that didn't resolve the issue.  Then I removed the fixed Nav but still no change.  I'm going to try the changes batman suggested and see if that works.  Do you have any other suggestions?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Also, as I mentioned on another topic you have replied to, you need to make sure that your image is larger than the area you add the image to. For example, you can't use an image that has dimensions of 1920x1000 in a section area that has a height of 1000px, as there is no room to scroll.

Also, the Wordpress admin bar when you're logged in as an admin pushes your image down by about 25px (height of the WP Adminbar), try viewing your site when not logged in.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Danny-

 

I have the photo much larger than the section and it wasn't the WP Adminbar.  I didn't have the Repeat Image box checked...once I did it corrected the problem.  Good Grief.

 

Thanks for your help.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thanks for informing us the issue has been resolved.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Actually, I was wrong.  As soon as I added the header back in above the parallax section the problem returned.  Batman's suggestion worked!

 

Thanks for all the help!

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Excellent.

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