React library for creating parallax scrolling
npm install react-parallax-scrollsh
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;
``