I like to combine one screen parallax animation with object animation,
I’m using (Mouse Move Over Element) _absolute-fullscreen-div to trigger the parallax effect while another object using Mouse-hover-object to trigger its self.
*Try to hover your mouse into the left rectangle, or right rectangle. Even though the object is animate but the parallax will be reset to a default position.
What I tried to do:
If I put absolute-fullscreen-div-trigger below Mouse-hover-object, The parallax will reset but Mouse hover object is playing its animation.
If I put absolute-fullscreen-div-trigger above Mouse-hover-object, the parallax works perfectly but Mouse-hover-object won’t play the animation.
Same goes for Form, Put above trigger, the parallax reset.
Put below trigger user can not type anything.
My question is:
How to keep the parallax position when we hover another interactive object without resetting the parallax? same goes with text form