React Parallax Container

A React component container that can makes a graphic card with a parallax effect

Features

• TypeScript friendly
• Supports parallax max depth configuration
• Parallax effect of cards of different sizes has strong consistency

Installation

1npm install parallax-container

Example

Usage

1import { ParallaxContainer } from 'parallax-container';
2
3function App() {
4  return (
5    <ParallaxContainer>
6      <img src="https://picsum.photos/seed/picsum/400/250" alt="" width={400} height={250} />
7      <p>a text title or description </p>
8    </ParallaxContainer>
9  );
10}
11
12export default App;

Configs

1interface Props {
2  children: React.ReactNode; // slot
3  maxDepth?: number; // Supports parallax depth configuration
4  className?: string;
5  style?: React.CSSProperties;
6}