react-card-parallax

React card parallax animation.

Example

Parallax Card Package

This package provides a ParallaxCard component that creates a parallax effect for each card based on the scroll position. The ParallaxCard component dynamically adjusts the scale and range of the card as the user scrolls down the page, offering a smooth and engaging user experience.

Features:

• Sticky card behavior with parallax effect.

• Scalable cards based on scroll position.

• Customizable range and scale multipliers for dynamic effects.

• Simple integration with the ParallaxCardContainer for managing scroll events.

---

Installation

To install the package, you can use either npm or yarn:

Using npm:

1
2npm  install  react-card-parallax
3

Using yarn:

1
2yarn  add  react-card-parallax
3

Usage

ParallaxCardContainer

This component acts as a wrapper for multiple ParallaxCard components. It listens for the scroll position and automatically passes the necessary scrollYProgress and cardIndex to the child ParallaxCard components.

1import { ParallaxCard, ParallaxCardContainer } from "react-card-parallax";
2const App = () => {
3  return (
4    <ParallaxCardContainer>
5      {" "}
6      <ParallaxCard>
7        {" "}
8        <h1>Card 1</h1>{" "}
9      </ParallaxCard>{" "}
10      <ParallaxCard>
11        {" "}
12        <h1>Card 2</h1>{" "}
13      </ParallaxCard>{" "}
14      <ParallaxCard>
15        {" "}
16        <h1>Card 3</h1>{" "}
17      </ParallaxCard>{" "}
18    </ParallaxCardContainer>
19  );
20};

ParallaxCard

Each ParallaxCard displays content with a parallax effect based on the scroll position. The scrollYProgress and cardIndex are automatically passed down from the ParallaxCardContainer.

Props:

Prop	Type	Description
children	React.ReactNode	The content inside the card.
color	string	The background color of the card. Default is #CDDDE4.
cardIndex	number	The index of the card within the ParallaxCardContainer. Helps adjust the parallax effect.
scrollYProgress	MotionValue<number>	The scroll progress value passed from ParallaxCardContainer.
containerStyle	CSSProperties	Custom styles for the container (optional).
cardStyle	CSSProperties	Custom styles for the card (optional).
rangeMultiplier	number	Multiplier for the range of scroll. Adjusts the scroll effect range dynamically. Default is 0.25.
scaleMultiplier	number	Multiplier for the scale of the card based on the scroll position. Default is 0.05.

1import { ParallaxCard } from "react-card-parallax";
2
3const App = () => {
4  return (
5    <ParallaxCard color="#FF5733" rangeMultiplier={0.3} scaleMultiplier={0.07}>
6      <h1>Custom Card</h1>
7    </ParallaxCard>
8  );
9};

Example

1import React from "react";
2import { ParallaxCard, ParallaxCardContainer } from "react-card-parallax";
3
4const App = () => {
5  return (
6    <ParallaxCardContainer style={{ minHeight: "100vh" }}>
7      <ParallaxCard color="#FF5733" rangeMultiplier={0.3} scaleMultiplier={0.07}>
8        <h1>Custom Parallax Card 1</h1>
9      </ParallaxCard>
10      <ParallaxCard color="#33A1FF">
11        <h1>Parallax Card 2</h1>
12      </ParallaxCard>
13      <ParallaxCard color="#FFC300">
14        <h1>Parallax Card 3</h1>
15      </ParallaxCard>
16    </ParallaxCardContainer>
17  );
18};
19
20export default App;

Customization

Dynamic Range and Scale:

The rangeMultiplier and scaleMultiplier allow you to control the behavior of the parallax effect. For example:

• Increasing the rangeMultiplier will make the scroll effect more pronounced.
• Increasing the scaleMultiplier will make the scale change more significantly with scroll.

You can adjust these multipliers on a per-card basis to achieve different effects for each card.

---

Dependencies

• react
• framer-motion
• @studio-freight/lenis (for smooth scrolling)

---

License

MIT License.

---

Contributing

If you'd like to contribute to this package, feel free to fork the repository and submit pull requests. Issues and feature requests can be opened on the GitHub repository.