Fixed(ish) Wrapper?

[Boxcar]

Anyone know how to get an effect like in this link?

https://www.churchmotiongraphics.com/?utm_source=tcp&utm_medium=banner&utm_content=post-footer&utm_campaign=cmg_may_new_motions

The VCM10K (2nd) wrapper moves over the top wrapper (1st) as if the top wrapper were fixed, but the top wrapper also moves up a little.

[Shikkediel]

It’s a standard parallax effect, the red element getting a relatively different position based on the amount scrolled.

[Boxcar]

Don’t think that is correct.

Setting the top to fixed prevents the image from moving, yet the top image moves a little.

[Shikkediel]

Bit of JavaScript and a translateY…

[Boxcar]

The idea of the post is to learn out how to achieve the effect, not be told that it is possible. :)

[Shikkediel]

learn

With a JavaScript parallax effect that’s based on the scroll position being calculated into a translateY which will change the positioning of the element.

Or did I write that already and are you asking for code without supplying any yourself? Well, since it only takes a couple of minutes to create…

Link

[Author]

Posts