Parallax Footer

The Parallax Footer creates a beautiful premium effect where the main page content scrolls up to reveal the footer sitting underneath it, like a curtain being lifted.

This is heavily used by top-tier creative studios and Awwwards-winning websites to add depth to the end of a page.

Live Preview

Installation

Architecture

This component leverages framer-motion's useScroll hook to precisely map the element's position relative to the viewport. As the container scrolls into view, the inner content translates downwards via a Y-offset, moving at a slightly slower rate than the actual scroll position.

Combined with overflow-hidden on the wrapper, this creates the physical illusion that the footer is anchored behind the main content.

Usage Guide

1. Import the Component

Import the component into your React or Next.js page:

import { ParallaxFooter } from "@/components/creative/parallax-footer";

2. Implementation Example

Render the component and customize its behavior by passing props:

import { ParallaxFooter } from "@/components/creative/parallax-footer";

export default function Example() {
  return (
    <div className="w-full flex items-center justify-center p-8">
      <ParallaxFooter
        scrollContainer{/* value */}
        intensity{10}
        watermark="example"
      >
        <div>Content goes here</div>
      </ParallaxFooter>
    </div>
  );
}