Jump to content


Photo
- - - - -

Parallax & Text animation


Best Answer batman , 22 September 2013 - 09:50 PM

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

 

;)

Go to the full post


  • Please log in to reply
16 replies to this topic

#1 jmad

jmad

    Advocate

  • Members

  • 909 posts
  • LocationCentral Florida
  • Framework Version:DMS
  • Country: Country Flag

Posted 18 September 2013 - 02:13 PM

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.



#2 Jake

Jake

    Advocate

  • Premium
  • 565 posts
  • LocationNC, USA
  • Country: Country Flag

Posted 18 September 2013 - 03:01 PM

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



#3 jmad

jmad

    Advocate

  • Members

  • 909 posts
  • LocationCentral Florida
  • Framework Version:DMS
  • Country: Country Flag

Posted 18 September 2013 - 03:26 PM

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



#4 Danny

Danny

    Is Awesome!

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

Posted 22 September 2013 - 12:13 PM

Hi, Have you removed the parallax image ?

#5 jmad

jmad

    Advocate

  • Members

  • 909 posts
  • LocationCentral Florida
  • Framework Version:DMS
  • Country: Country Flag

Posted 22 September 2013 - 08:06 PM

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



#6 Rob

Rob

    One Smart Egg

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

Posted 22 September 2013 - 08:50 PM

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



#7 jmad

jmad

    Advocate

  • Members

  • 909 posts
  • LocationCentral Florida
  • Framework Version:DMS
  • Country: Country Flag

Posted 22 September 2013 - 09:33 PM

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



#8 batman

batman

    Bat Learning

  • Members

  • 2167 posts
  • LocationBuenos Aires, Argentina
  • Framework Version:DMS
  • Country: Country Flag

Posted 22 September 2013 - 09:50 PM   Best Answer

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

 

;)


  • jmad likes this

#9 jmad

jmad

    Advocate

  • Members

  • 909 posts
  • LocationCentral Florida
  • Framework Version:DMS
  • Country: Country Flag

Posted 22 September 2013 - 10:58 PM

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



#10 batman

batman

    Bat Learning

  • Members

  • 2167 posts
  • LocationBuenos Aires, Argentina
  • Framework Version:DMS
  • Country: Country Flag

Posted 23 September 2013 - 01:39 AM

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


#11 Danny

Danny

    Is Awesome!

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

Posted 23 September 2013 - 09:47 AM

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


#12 jmad

jmad

    Advocate

  • Members

  • 909 posts
  • LocationCentral Florida
  • Framework Version:DMS
  • Country: Country Flag

Posted 23 September 2013 - 12:05 PM

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?



#13 Danny

Danny

    Is Awesome!

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

Posted 23 September 2013 - 12:53 PM

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.



#14 jmad

jmad

    Advocate

  • Members

  • 909 posts
  • LocationCentral Florida
  • Framework Version:DMS
  • Country: Country Flag

Posted 23 September 2013 - 01:01 PM

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.



#15 Danny

Danny

    Is Awesome!

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

Posted 23 September 2013 - 01:11 PM

Thanks for informing us the issue has been resolved.



#16 jmad

jmad

    Advocate

  • Members

  • 909 posts
  • LocationCentral Florida
  • Framework Version:DMS
  • Country: Country Flag

Posted 23 September 2013 - 01:26 PM

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!



#17 Rob

Rob

    One Smart Egg

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

Posted 23 September 2013 - 10:13 PM

Excellent.