Interaction with separate trigger?

Design help Animations & Interactions
1

Hi

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.

https://preview.webflow.com/preview/ix2question?preview=a72d5ffb60d85eea22e409a43fe1193e

*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

Thank you!

Here is my public share link: LINK
(how to access public share link)

2

Hi everyone, To make it clear…
I like to achieve fullscreen interactive like in this site:

http://www.ernestandcelestine.com/character-celestine.php?lng=en

You can click the menu as well while navigating your mouse on the screen and the paralax still working.

This what I’ve tried 2 method to achieve those effect:

how-02
how-021647×575 32 KB

Scenario A

If we put the trigger div on the top,
the paralax working perfectly, BUT user can not block the text, type or push the button on form block because when user click, they actually click the Trigger div above it. [Trigger div blocking the form block]

Scenario B

If we put the form block on the top,
the user can block the text, type or push the button of the form, BUT when user hover into the form area, the paralax reset to default position.

How to make user able to block the text, type or push the button on form block while maintaining paralax?
Any solution?

3

It’s been more than one week,
can someone help?