search

tomsarduy / parallux

Parallax effect with esteroids, cross browser and responsive. Oh, it works with all content types: background images, videos, text, images, slick slider and more - https://tomsarduy.github.io/parallux/
Apache License 2.0
31 stars 5 forks source link

Incorrect translate3d if not at top of page. #3

Open trinadin opened 7 years ago

trinadin commented 7 years ago

I was trying to incorporate this on an element that falls just below a fixed header. I ended up adding an element that is the same height as the header to hold space, and found out that the translate3d that is initially set on parallux-inner is incorrect if the section that you wish to parallax is not at the top of the page. You can recreate this in demo3 by adding a div of any height above the top parallax item. It will incorrectly calculate, resulting in the video being pulled up and out of the frame. Any suggestions?

tomsarduy commented 7 years ago

Yes, I'm aware of that. Now I'm remembering that case was really difficult to achieve because .parallux-inner need to have extra space in top and bottom for the parallax animation with the background image, so I ended only supporting full page parallax and fixed header.

In your specific case, I could make the translate3d start in the right position, but when the background image animate, you will see a white space above the parallax element when you start scrolling.

PD: I didn't know people were still using my old plugin. I will work on some improvements soon.