diff --git a/README.md b/README.md
index 3e89be8..2e877c9 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,5 @@
# 💻 React Step Parallax
+### 내가 쉽게 활용하려고 만든 Parallax 컴포넌트 💪
@@ -57,18 +58,28 @@ import { FixedStepParallax } from 'react-step-parallax';
const App = () => {
return (
+ {/* Parallax public setting */}
0.5)
extra={/* extra ReactNode(Required position: absolute) */}
>
-
+
{/* STEP1 ReactNode */}
diff --git a/package.json b/package.json
index 612e7ad..05eeeac 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "react-step-parallax",
- "version": "2.1.0",
+ "version": "2.2.0",
"description": "react-step-parallax",
"main": "dist/index.js",
"module": "dist/index.js",
diff --git a/src/components/FixedStepParallax/index.tsx b/src/components/FixedStepParallax/index.tsx
index 50b9393..9f3384c 100644
--- a/src/components/FixedStepParallax/index.tsx
+++ b/src/components/FixedStepParallax/index.tsx
@@ -31,6 +31,13 @@ export interface FixedStepParallaxContextProps {
export interface FixedStepParallaxItemProps {
children: React.ReactNode;
+ rotate?: number;
+ endX?: number;
+ endY?: number;
+ startX?: number;
+ startY?: number;
+ easing?: Easing;
+ duration?: number;
}
const FixedStepParallaxContext = createContext({
@@ -46,9 +53,9 @@ const FixedStepParallaxContext = createContext({
const FixedStepParallax = ({
children,
extra,
- rotate = 0,
background = '#fff',
duration = 500,
+ rotate = 0,
endX = 0,
endY = 0,
startX = 0,
@@ -133,13 +140,31 @@ const FixedStepParallax = ({
);
};
-FixedStepParallax.Item = ({ children }: FixedStepParallaxItemProps) => {
+FixedStepParallax.Item = ({
+ children,
+ endX,
+ endY,
+ startX,
+ startY,
+ rotate,
+ easing,
+ duration,
+}: FixedStepParallaxItemProps) => {
const context = useContext(FixedStepParallaxContext);
+ const overridingContextProps = {
+ endX: endX ?? context.endX,
+ endY: endY ?? context.endY,
+ startX: startX ?? context.startX,
+ startY: startY ?? context.startY,
+ rotate: rotate ?? context.rotate,
+ easing: easing ?? context.easing,
+ duration: duration ?? context.duration,
+ };
return (
+ {...overridingContextProps}>
{children}
);
diff --git a/src/components/FixedStepParallax/style.tsx b/src/components/FixedStepParallax/style.tsx
index c520f83..9395386 100644
--- a/src/components/FixedStepParallax/style.tsx
+++ b/src/components/FixedStepParallax/style.tsx
@@ -1,6 +1,5 @@
import styled from '@emotion/styled';
import { FixedStepParallaxContextProps } from '.';
-import { getConvertedImageSize } from '@utils/common';
export const FixedStepParallaxMainWrapper = styled.div<{
count: number;
@@ -35,9 +34,7 @@ export const FixedStepParallaxItemWrapper = styled.div `all ${duration / 1000}s ${easing}`};
transform: ${({ startX, startY, rotate }) =>
- `translate(${getConvertedImageSize(startX)}, ${getConvertedImageSize(
- startY
- )}) rotate(${rotate}deg)`};
+ `translate(${startX}px, ${startY}px) rotate(${rotate}deg)`};
z-index: 9999;
&.active {
diff --git a/src/components/FlyInItemParallax/index.tsx b/src/components/FlyInItemParallax/index.tsx
index fc9af02..abbb6ec 100644
--- a/src/components/FlyInItemParallax/index.tsx
+++ b/src/components/FlyInItemParallax/index.tsx
@@ -9,7 +9,7 @@ import { Align, Easing, FlexWrap, Justify } from '@interfaces/style';
export interface FlyInItemParallaxProps {
children: React.ReactNode;
extra?: React.ReactNode;
- screenHeight?: string | number;
+ screenHeight?: number;
direction?: 'column' | 'row';
justify?: Justify;
align?: Align;
@@ -37,6 +37,12 @@ export interface FlyInItemParallaxContextProps {
export interface FlyInItemParallaxItemProps {
children: React.ReactNode;
idx?: number;
+ duration?: number;
+ startX?: number;
+ startY?: number;
+ easing?: Easing;
+ delay?: number;
+ rotate?: number;
}
const FlyInItemParallaxContext = createContext({
@@ -126,12 +132,29 @@ const FlyInItemParallax = ({
FlyInItemParallax.Item = ({
children,
+ startX,
+ startY,
+ easing,
+ duration,
+ delay,
+ rotate,
idx = 0,
}: FlyInItemParallaxItemProps) => {
const context = useContext(FlyInItemParallaxContext);
+ const overridingContextProps = {
+ startX: startX ?? context.startX,
+ startY: startY ?? context.startY,
+ duration: duration ?? context.duration,
+ easing: easing ?? context.easing,
+ delay: delay ?? context.delay,
+ rotate: rotate ?? context.rotate,
+ };
return (
-
+
{children}
);
diff --git a/src/components/FlyInItemParallax/style.tsx b/src/components/FlyInItemParallax/style.tsx
index 903b419..e4e87c7 100644
--- a/src/components/FlyInItemParallax/style.tsx
+++ b/src/components/FlyInItemParallax/style.tsx
@@ -1,7 +1,7 @@
import styled from '@emotion/styled';
import { FlyInItemParallaxContextProps } from '.';
import { Align, FlexWrap, Justify } from '@interfaces/style';
-import { getConvertedImageSize } from '@utils/common';
+import { getConvertedCssSize } from '@utils/common';
export const FlyInItemParallaxMainWrapper = styled.div<{
background: string;
@@ -14,7 +14,7 @@ export const FlyInItemParallaxMainWrapper = styled.div<{
width: 100%;
height: ${({ screenHeight }) =>
screenHeight
- ? getConvertedImageSize(screenHeight)
+ ? getConvertedCssSize(screenHeight)
: `calc((var(--vh, 1vh) * 100))`};
background: ${({ background }) => background};
`;
@@ -46,9 +46,7 @@ export const FlyInItemWrapper = styled.div<
`all ${duration / 1000}s ${easing} ${(delay / 1000) * idx}s`};
transform: ${({ startX, startY, rotate }) =>
- `translate(${getConvertedImageSize(startX)}, ${getConvertedImageSize(
- startY
- )}) rotate(${rotate}deg)`};
+ `translate(${startX}px, ${startY}px) rotate(${rotate}deg)`};
&.active {
opacity: 1;
diff --git a/src/stories/components/FixedStepParallax.stories.tsx b/src/stories/components/FixedStepParallax.stories.tsx
index edbb010..48a4d5b 100644
--- a/src/stories/components/FixedStepParallax.stories.tsx
+++ b/src/stories/components/FixedStepParallax.stories.tsx
@@ -43,35 +43,35 @@ const Template: StoryFn = ({ ...args }) => {
React FullScreen Step Parallax
- Step1
+ Default Step1
-
+
React FullScreen Step Parallax
- Step2
+ Overriding(startX: 0, startY: 100) Step2
-
+
React FullScreen Step Parallax
- Step3
+ Overriding(startX: -100) Step3
React FullScreen Step Parallax
- Step4
+ Default Step4
React FullScreen Step Parallax
- Step5
+ Default Step5
diff --git a/src/stories/components/FlyInItemParallax.stories.tsx b/src/stories/components/FlyInItemParallax.stories.tsx
index 67ad141..4619df3 100644
--- a/src/stories/components/FlyInItemParallax.stories.tsx
+++ b/src/stories/components/FlyInItemParallax.stories.tsx
@@ -88,10 +88,16 @@ const Template: StoryFn
= ({ ...args }) => {
Description
-
+
Item1
- Description
+ Overriding(Rotate: 30)
+
+
+
+
+ Item1
+ Overriding(startY: -100)
@@ -124,21 +130,23 @@ const Template: StoryFn = ({ ...args }) => {
};
const Box = styled.div`
- padding: 20px;
+ padding: 30px 40px;
+ background-color: #bf5f5f;
+ color: #fff;
`;
export const Default = {
render: Template,
args: {
- screenHeight: null,
+ screenHeight: 0,
delay: 100,
background: '#fff',
duration: 300,
rotate: 0,
startX: 0,
startY: 100,
- gap: 0,
+ gap: 10,
threshold: 0.3,
justify: 'center',
align: 'center',
diff --git a/src/utils/common.ts b/src/utils/common.ts
index f4bf3ca..3856d83 100644
--- a/src/utils/common.ts
+++ b/src/utils/common.ts
@@ -1,8 +1,4 @@
-export const getConvertedImageSize = (size?: string | number) => {
- if (typeof size === 'number') {
- return `${size}px`;
- }
-
+export const getConvertedCssSize = (size?: string | number) => {
if (!size) return null;
if (isNaN(+size)) return null;
return `${size}px`;