react-parallax-scroll

$3

A lightweight React library for creating parallax scroll.

Demo

Banner Parallax Demo

Awesome Animated Demo

Install

``sh
npm install react-parallax-scroll
`

Parallax Usage

`javascript
import React from 'react';
import Parallax, { Layer } from 'react-parallax-scroll';

const App = () => {
return (

{/ ----- Banner parallax -----/}

A child element

{/ ----- PositionY parallax -----/}


{/ ----- PostionY parallax in reverse direction -----/}


{/ ----- PositionX parallax -----/}


{/ ----- Zoom parallax -----/}


{/ ----- Put Layer to wherever you like -----/}

)
}

export default App;
`

$3

| Type | Description |
| ------ | ------ |
| backgroundY | change container's background vertically|
| backgroundX | change container's background horizontally|
| translateY | change container's position vertically|
| translateX | change container's position horizontally|
| rotate | rotate container|

Appear Usage

If you're familiar with wowjs, it should be the same behavior.
In this section, I use animated.css for my component. You can create your own animated classes if you're comfortable with.

`javascript
import React from 'react';
import Parallax, { AppearLayer } from 'react-parallax-scroll';
import './animated.css';

const App = () => {
return (

{/ ----- appear with .rotateIn class and duration 1.5 seconds -----/}
A simple text

{/ ----- appear with .slideInUp -----/}



An element

{/ ----- appear with 3 times loop -----/}
Play 3 times

{/ ----- appear with infinite loop -----/}
Play forever

)
}

export default App;
``