react-animated-ui/docs/ParallaxScrolling.md

A React UI library featuring animated components including buttons, forms, dropdowns, date pickers, and more.

# Parallax Scrolling

## Description  
A React component that enables smooth parallax scrolling effects to create engaging depth and motion in your web pages.

---

## Props

| Prop          | Type                         | Default          | Description                                |
|---------------|------------------------------|------------------|--------------------------------------------|
| `children`    | `React.ReactNode`            | `-`              | Content to apply parallax effect on        |
| `speed`       | `number`                     | `0.5`            | Speed factor of parallax effect (0 to 1)  |
| `className`   | `string`                     | `""`             | Custom CSS class for styling                 |
| `style`       | `React.CSSProperties`        | `{}`             | Inline styles                               |

---

## Usage

```tsx
import { ParallaxScrolling } from 'react-animated-ui';

function MyPage() {
  return (
    <ParallaxScrolling speed={0.3} className="my-parallax-section">
      <div style={{ height: '400px', backgroundImage: 'url(/background.jpg)', backgroundSize: 'cover' }}>
        <h1>Welcome to the Parallax Section</h1>
      </div>
    </ParallaxScrolling>
  );
}