How can I create a floating content animation with a fixed footer?

Store Design
, , ,

Topic summary

A user is seeking help to create a specific scrolling animation effect for their Shopify store. The desired effect involves:

  • A fixed hero/banner image at the top
  • A fixed footer at the bottom
  • Main content that floats/scrolls over these fixed elements, gradually revealing the footer underneath

The user has included an attachment (likely a reference image or video demonstrating the desired effect) to illustrate what they’re trying to achieve. This appears to be a CSS-based parallax or layered scrolling effect. No solutions or responses have been provided yet.

Summarized with AI on November 10. AI used: claude-sonnet-4-5-20250929.
1

Hi everyone,

I would like to create an animation, where the first image banner and the footer are in a fixed position and the content of the website floating on top revealing the footer. Can someone help me create this? See attachment: https://cdn.shopify.com/videos/c/o/v/6d672764c7b440e6b1d3dbabbe1a9c78.mov