https://github.com/jscottsmith/react-scroll-parallax

🔮 React hooks and components to create parallax scroll effects for banners, images or any other DOM elements.
https://github.com/jscottsmith/react-scroll-parallax

animation banner component effects hooks parallax react scroll

Last synced: 12 days ago
JSON representation

🔮 React hooks and components to create parallax scroll effects for banners, images or any other DOM elements.

• Host: GitHub
• URL: https://github.com/jscottsmith/react-scroll-parallax
• Owner: jscottsmith
• License: mit
• Created: 2017-03-14T07:38:20.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2024-10-11T18:34:01.000Z (about 1 month ago)
• Last Synced: 2024-10-14T20:20:45.999Z (27 days ago)
• Topics: animation, banner, component, effects, hooks, parallax, react, scroll
• Language: TypeScript
• Homepage: https://react-scroll-parallax.damnthat.tv/
• Size: 9.24 MB
• Stars: 2,876
• Watchers: 14
• Forks: 160
• Open Issues: 10
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


# React Scroll Parallax

[![NPM Version Latest](https://img.shields.io/npm/v/react-scroll-parallax/latest)](https://www.npmjs.com/package/react-scroll-parallax)

[![NPM Downloads](https://img.shields.io/npm/dm/react-scroll-parallax)](https://www.npmjs.com/package/react-scroll-parallax)

[![Codecov](https://codecov.io/gh/jscottsmith/react-scroll-parallax/branch/v3/graph/badge.svg)](https://codecov.io/gh/jscottsmith/react-scroll-parallax)

[![Rate on Openbase](https://badges.openbase.com/js/rating/react-scroll-parallax.svg)](https://openbase.com/js/react-scroll-parallax?utm_source=embedded&utm_medium=badge&utm_campaign=rate-badge)

[![Test and Lint](https://github.com/jscottsmith/react-scroll-parallax/actions/workflows/main.yml/badge.svg)](https://github.com/jscottsmith/react-scroll-parallax/actions/workflows/main.yml)

[![Storybook](https://github.com/jscottsmith/react-scroll-parallax/actions/workflows/surge.yml/badge.svg)](https://github.com/jscottsmith/react-scroll-parallax/actions/workflows/surge.yml)

[![Storybook](https://github.com/jscottsmith/react-scroll-parallax/actions/workflows/coverage.yml/badge.svg)](https://github.com/jscottsmith/react-scroll-parallax/actions/workflows/coverage.yml)

React hooks and components to create parallax scroll effects for banners, images or any other DOM elements. Utilizes [Parallax Controller](https://parallax-controller.v1.damnthat.tv) to add vertical or horizontal scrolling based effects to elements. [Optimized](https://parallax-controller.v1.damnthat.tv/docs/performance) to _reduce_ jank on scroll and works with SSR and SSG rendered React apps.

If you're coming from [V2](https://github.com/jscottsmith/react-scroll-parallax/tree/v2), here's a [migration guide](https://react-scroll-parallax.damnthat.tv/docs/migration-guides/v2-migration-guide).

## Install

With npm

```

npm install react-scroll-parallax

```

or yarn

```

yarn add react-scroll-parallax

```

## Example

[Create effects](https://react-scroll-parallax.damnthat.tv/docs/examples/how-it-works) with a hook:

```jsx

function Component() {

  const parallax = useParallax({

    speed: -10,

  });

  return 
;

}

```


or with a component:

```jsx

function Component() {

  return (

    

      


    

  );

}

```


## Getting Started

Read the [documentation](https://react-scroll-parallax.damnthat.tv/) for setup and usage instructions.

- [Usage](https://react-scroll-parallax.damnthat.tv/docs/usage/)

- [Usage with NextJS 13](https://react-scroll-parallax.damnthat.tv/docs/usage/next-13)

- [How it works](https://react-scroll-parallax.damnthat.tv/docs/examples/how-it-works)

### Demos

- [Storybook v3](https://react-scroll-parallax-v3.surge.sh/) - [Source Code](https://github.com/jscottsmith/react-scroll-parallax/tree/v3/stories)

- [Demo 1](https://react-scroll-parallax-examples.vercel.app/) - [Source Code](https://github.com/jscottsmith/react-scroll-parallax-examples)

- [Demo 2](https://react-scroll-parallax.netlify.app/) - [Source Code (old 2.x version)](https://github.com/jscottsmith/react-parallax-site)

### Docs: Hooks

- [`useParallax()`](https://react-scroll-parallax.damnthat.tv/docs/usage/hooks/use-parallax)

- [`useParallaxController()`](https://react-scroll-parallax.damnthat.tv/docs/usage/hooks/use-parallax-controller)

### Docs: Components

- [``](https://react-scroll-parallax.damnthat.tv/docs/usage/components/parallax-component)

- [``](https://react-scroll-parallax.damnthat.tv/docs/usage/components/parallax-banner-component)

- [``](https://react-scroll-parallax.damnthat.tv/docs/usage/components/parallax-provider)