내가 쉽게 활용하려고 만든 Parallax 컴포넌트 💪
React FullPage Step Parallax 🚀
yarn add react-step-parallax
or
npm install react-step-parallax
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) 😊
yarn add react-step-parallax next-transpile-modules
or
npm install react-step-parallax next-transpile-modules
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode : true ,
transpilePackages : [ "react-step-parallax" ] ,
} ;
module . exports = nextConfig ;
the usage is the same as "React.js"