Parallax

Heroes 139

About

- parallax effect for multiple items, can be customized through 'start (start of animation)' and 'end (end of the animation)'

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Parallax to your project and fits it to your theme.

Code

How Parallax is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import {   Parallax,
  ParallaxItem,
  PrallaxContainer,
 } from "@/components/ui/parallax";
import {StaggerText } from '@/components/ui/stagger-text'
import {Button } from '@/components/ui/button'

export default function DemoOne() {
  return (<Parallax className="h-[3200px] md:h-[2000px] p-12 text-black bg-white">
  <div className="sticky top-0 h-screen space-y-4 w-full flex flex-col justify-center items-center text-center">
        <StaggerText
        className="text-5xl font-bold tracking-tighter md:w-2/3 mx-auto"
        text="Creating brands that brings people to the shop"
        direction="z"
      />

        <p
          className="max-w-prose  "
        >
          Defining the brand’s unique value proposition and positioning it in
          the market, creating a brand identity that resonates with the target
          audience.
        </p>

          <Button className="bg-indigo-600 hover:bg-indigo-400" size="lg">Get Started</Button>
      </div>

      <PrallaxContainer className="flex flex-wrap justify-between gap-4 w-full">
        <ParallaxItem
          className="w-11/12 md:w-1/4 max-h-96"
          start={200}
          end={-200}
        >
          <img
            className="size-full object-cover object-[50%_50%]"
            src="https://cdn.21st.dev/assets/mirror/90/90cfd5c4284486471dfe4125d756573aefd8c19dd7b9718cf687dc701571236f.jpg"
            alt="street"
          />
        </ParallaxItem>

        <ParallaxItem
          className="w-11/12 md:w-1/4 max-h-96"
          start={500}
          end={20}
        >
          <img
            className="size-full object-cover object-[50%_50%]"
            src="https://cdn.21st.dev/assets/mirror/46/46c3bd4150375e98bef564f8e290923c6973912f291eef93c9817f9ddc101d8e.jpg"
            alt="street"
          />
        </ParallaxItem>
        <ParallaxItem
          className="w-11/12 md:w-1/4 max-h-96"
          start={800}
          end={50}
        >
          <img
            className="size-full object-cover object-[50%_50%]"
            src="https://cdn.21st.dev/assets/mirror/07/070c5559af71dc96ff1dd399227c31c89d43334da9dd33bdb8ade8df57048d86.jpg"
            alt="street"
          />
        </ParallaxItem>
        <ParallaxItem
          className="w-11/12 md:w-1/4 max-h-96"
          start={500}
          end={50}
        >
          <img
            className="size-full object-cover object-[50%_50%]"
            src="https://cdn.21st.dev/assets/mirror/42/42f757b81c90002a2b08741e332a2393ccfc0f95d5d5c64314781a7f8fa4045a.jpg"
            alt="street"
          />
        </ParallaxItem>

        <ParallaxItem
          className="w-11/12 md:w-1/4 max-h-96"
          start={800}
          end={70}
        >
          <img
            className="size-full object-cover object-[50%_50%]"
            src="https://cdn.21st.dev/assets/mirror/99/99eb9cd4856185b6a83210bd3e28d24a6c2db32c9c1020119360219e90bc1aaa.jpg"
            alt="street"
          />
        </ParallaxItem>
      </PrallaxContainer>
  </Parallax>
  );
}