---
title: React Scroll Parallax
tags: Projects
---

# React Scroll Parallax
[Document](https://react-scroll-parallax.damnthat.tv/docs/intro)

[Demo](https://react-scroll-parallax.netlify.app/)

[Source Code](https://github.com/jscottsmith/react-scroll-parallax)

## Installation
`npm i react-scroll-parallax`

## Usage
The plugin itself provides many ways of usage, here we will only show you one of them.

### Set the componenet

type ParallaxSettingProps = {
  children: React.ReactNode;
};

// Moving to left side
const ParallaxSettingLeft: React.FC<ParallaxSettingProps> = ({ children }) => {
  return (
    <Parallax translateX={[20, -20]} opacity={[0.6, 1]}>
      {children}
    </Parallax>
  );
};

// Moving to right side
const ParallaxSettingRight: React.FC<ParallaxSettingProps> = ({ children }) => {
  return (
    <Parallax translateX={[-20, 20]} opacity={[0.6, 1]}>
      {children}
    </Parallax>
  );
};

// Moving from low to up
const ParallaxSettingSlow: React.FC<ParallaxSettingProps> = ({ children }) => {
  return <Parallax speed={-5}>{children}</Parallax>;
};

// Moving from up to low
const ParallaxSettingFast: React.FC<ParallaxSettingProps> = ({ children }) => {
  return <Parallax speed={5}>{children}</Parallax>;
};

const ParallaxSettingRotate: React.FC<ParallaxSettingProps> = ({
  children
}) => {
  return <Parallax rotate={[-60, 60]}>{children}</Parallax>;
};

### Use the componenet

<ParallaxSettingSlow>
  <Box
    fontSize={{ base: '24px', md: isChinese ? '36px' : '26px' }}
    mb={3}
  >
    {t('UnlimitedRebates')}
  </Box>
  <Box
    textAlign="left"
    fontSize={{ base: isChinese ? 'auto' : '12px', md: '16px' }}
  >
    {t('WCGMarketsDoesNotSet')}
  </Box>
</ParallaxSettingSlow>



<ParallaxSettingFast>
  <Box fontSize={isChinese ? '36px' : '26px'} mb={3}>
    {t('ManagementToolsProvided')}
  </Box>
  <Box textAlign="left">{t('WCGMarketsWillProvide')}</Box>
</ParallaxSettingFast>