▼
Streaming live at 10am (PST)

How to achieve this tricky scroll effect

#1

Example here: http://tennentbrown.co.nz/

Ignoring the sexy logo animation, the effect i’m interested in achieving is how, as you scroll down the logo section of the site, the rest of the page remains fixed (giving you a nice “lifting curtain” look). BUT once the logo section is completely scrolled away, the rest of the page resumes scrolling like it’s no longer fixed-position.

Any ideas how one might pull this off with Webflow interactions?

The prototype I’m working on is linked below. Thanks!

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

#2

This is the closest I can achieve with IX2 (as unfortunately IX2 doesn’t support position:fixed)

http://sandbox-903b9c.webflow.io/interstitial-curtain

EDIT: I just added scale and opacity for more fun

I did the reverse (content scrolling up, over the ad) using IX1 + cookies so that visitors only see it once (clear cookies or view in incognito to see it again)

http://squarerooms.com.sg

#3

Thanks @samliew, much appreciated. That’s pretty spot on! I do see there’s a little jumpiness as I scroll. Mind sharing the read-only project link so I can dig in and see what you did?

#4

My sandbox share link can be found here

Dynamic Video Lightbox!

#5

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.