Streaming live at 10am (PST)

How to re-create this: foreground object stays in place while background scrolls?


#1

Hi,
I love what is going on here: http://www.google.com/calendar/about/

The phone seems to float in place during the scroll, but the context/background switches. How did they get the **phone frame to stay in place ** while the background scrolls? Can webflow do this? A tutorial on this would be great!

shridhar




#2

Ok, answering my own question. I tried using the float property on the phone container and got this far.

https://preview.webflow.com/preview/floatingphone?preview=40f55d340f552571584de9be89173491

Now the next steps are to be able to trigger particular animation on the screen when the backgrounds change. Am i on the right track?


#3

Hi @srile,
yes, I think you are going in right direction.
Unfortunately, I don't have enough time for make detailed tutorial, but can point main steps:
1) Make interaction with scroll trigger
2) Inside the "phone" element there should be few divs with content that you want to show.
3) "Phone" element should have overflow: hidden.
4) Interaction should be something like: when some section comes to the screen view, particular image (content,div, etc) moves to the "phone" view.

Hope it helps,
Anna.


#4