React Scroll Parallax

Document

Demo

Source Code

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>