react-step-parallax

💻 React Step Parallax

내가 쉽게 활용하려고 만든 Parallax 컴포넌트 💪

React FullPage Step Parallax 🚀

🌟 CONTRIBUTORS 🌟

Storybook Demo Page

Click Icon ⬇️

How to use 😊

STEP 1️⃣

• Install library

yarn add react-step-parallax
or
npm install react-step-parallax

STEP 2️⃣

import { FixedStepParallax } from 'react-step-parallax';

const App = () => {
  return (
    <div>
      {/* Parallax Common Setting */}
      <FixedStepParallax
        background={'#fff'} // css background property (string)
        startX={100} // number(px), start position
        startY={0} // number(px), start position
        endX={0} // number(px), end position
        endY={0} // number(px), end position
        rotate={0} // number(deg)
        easing={'ease'} // 'linear' | 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out'
        duration={500} // number (millisecond 500 -> 0.5)
        extra={/* extra ReactNode(Required position: absolute) */}
      >
        <FixedStepParallax.Item
          // Each Item Props Overriding
          startX={200} 
          startY={-200}
          endX={100} 
          endY={100}
          rotate={30}
          easing={'ease-in'} 
          duration={300} 
        >
          {/* STEP1 ReactNode */}
        </FixedStepParallax.Item>
        <FixedStepParallax.Item>
          {/* STEP2 ReactNode */}
        </FixedStepParallax.Item>
        <FixedStepParallax.Item>
          {/* STEP3 ReactNode */}
        </FixedStepParallax.Item>
        <FixedStepParallax.Item>
          {/* STEP4 ReactNode */}
        </FixedStepParallax.Item>
      </FixedStepParallax>
      {/* ... */}
    </div>
  )
}

How to use Next.js(v13) 😊

STEP 1️⃣

• Install library

yarn add react-step-parallax next-transpile-modules
or
npm install react-step-parallax next-transpile-modules

STEP 2️⃣

• Modify next.config

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  transpilePackages: ["react-step-parallax"],
};

module.exports = nextConfig;

STEP 3️⃣

• the usage is the same as "React.js"