parallax-container

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

npm install parallax-container

Example

Usage

import { ParallaxContainer } from 'parallax-container';

function App() {
  return (
    <ParallaxContainer>
      <img src="https://picsum.photos/seed/picsum/400/250" alt="" width={400} height={250} />
      <p>a text title or description </p>
    </ParallaxContainer>
  );
}

export default App;

Configs

interface Props {
  children: React.ReactNode; // slot
  maxDepth?: number; // Supports parallax depth configuration
  className?: string;
  style?: React.CSSProperties;
}