← Animation / MIXED CSS Source | JS Source

01: Title Scroll Crop

This example uses a container that's 200vh with a sticky hero thats 100vh. Max-height is bound to the different of scroll position vs window height, which causes the 'curtain' to rise. Text is duplicated on two layers.

01: Title Scroll Crop

This example uses a container that's 200vh with a sticky hero thats 100vh. Max-height is bound to the different of scroll position vs window height, which causes the 'curtain' to rise. Text is duplicated on two layers.

And because the sticky element is contained in an element that has double height it stops at this point and normal text flow resumes.

Consectetur odio iusto distinctio eligendi ipsum nisi, quibusdam. Quae laborum ipsum nam fuga neque maiores impedit? Laudantium aliquam omnis obcaecati doloremque nesciunt, tenetur sunt impedit Dolore eaque autem delectus dolor

Ipsum ipsum harum necessitatibus labore natus Recusandae ratione minus ipsa reprehenderit illo. Veniam numquam placeat consectetur eligendi dicta nihil voluptatibus ea. Error mollitia unde perferendis harum voluptatum nulla aperiam! Dignissimos.

And now more empty space for scroooooolllingggg...