Jump to content

Archived

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

jmad

Parallax & Text animation

Recommended Posts

jmad+    80
jmad

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
jmad+    80
jmad

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
Danny    1,327
Danny
Hi, Have you removed the parallax image ?

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
jmad+    80
jmad

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
Rob    547
Rob

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


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
jmad+    80
jmad

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
batman    389
batman

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

 

;)

  • Like 1

Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites
jmad+    80
jmad

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
batman    389
batman
It cost me more than one night to solve.
:geek: 
I hope to help you, you tell me if you resolved the problem.

Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites
Danny    1,327
Danny
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

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
jmad+    80
jmad

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
Danny    1,327
Danny

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.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
jmad+    80
jmad

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
Danny    1,327
Danny

Thanks for informing us the issue has been resolved.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
jmad+    80
jmad

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
Rob    547
Rob

Excellent.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites

×