Merge pull request #7 from ssi02014/dev

v2.1.0
ssi02014 · Jun 20, 2023 · 62938d6 · 62938d6
2 parents f84c6e6 + 73febe9
commit 62938d6
Show file tree

Hide file tree

Showing 8 changed files with 53 additions and 69 deletions.
diff --git a/README.md b/README.md
@@ -30,7 +30,7 @@
 <br />
 
 <h3 align="center">Storybook Demo Page</h3>
-<h5 align="center">Click Icon</h5>
+<h5 align="center">Click Icon ⬇️</h5>
 <p align="center">
   <a href="https://ssi02014.github.io/react-step-parallax">
     <img src="https://user-images.githubusercontent.com/64779472/220122236-c90ae4a5-8271-41df-b150-230b97991d41.png" width="120">
@@ -39,20 +39,6 @@
 
 <br />
 
-## Desktop Video 📷
-<p align='center'>
-  <img width="450" src="https://github.com/ssi02014/react-step-parallax/assets/64779472/91268e36-09b4-4e75-9f1a-386474909fac">
-</p>
-
-<br />
-
-## Mobile Video 📷
-<p align='center'>
-  <img width="450" src="https://github.com/ssi02014/react-step-parallax/assets/64779472/1628f06e-a3f8-4068-9497-cfe61112c8d0">
-</p>
-
-<br />
-
 ## How to use 😊
 ### STEP 1️⃣
 - Install library
@@ -75,12 +61,10 @@ const App = () => {
         easing={'ease'} // 'linear' | 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out'
         duration={500} // number
         background={'#fff'} // css background property (string)
-        originX={0} // number, original position
-        originY={0} // number, original position
-        targetX={100} // number, translate start position
-        targetY={0} // number, translate start position
-        translateX={100} // number
-        translateY={0} // number
+        startX={100} // number, start position
+        startY={0} // number, start position
+        endX={0} // number, end position
+        endY={0} // number, end position
         rotate={0} // number
         extra={/* extra ReactNode(Required position: absolute) */}
       >

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-step-parallax",
-  "version": "2.0.0",
+  "version": "2.1.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
@@ -11,20 +11,20 @@ export interface FixedStepParallaxProps {
   rotate?: number;
   background?: string;
   duration?: number;
-  originX?: number;
-  originY?: number;
-  targetX?: number;
-  targetY?: number;
+  endX?: number;
+  endY?: number;
+  startX?: number;
+  startY?: number;
   extra?: React.ReactNode;
   easing?: Easing;
 }
 
 export interface FixedStepParallaxContextProps {
   duration: number;
-  originX: number;
-  originY: number;
-  targetX: number;
-  targetY: number;
+  endX: number;
+  endY: number;
+  startX: number;
+  startY: number;
   rotate: number;
   easing: Easing;
 }
@@ -34,10 +34,10 @@ export interface FixedStepParallaxItemProps {
 }
 
 const FixedStepParallaxContext = createContext<FixedStepParallaxContextProps>({
-  targetX: 0,
-  targetY: 0,
-  originX: 0,
-  originY: 0,
+  startX: 0,
+  startY: 0,
+  endX: 0,
+  endY: 0,
   rotate: 0,
   duration: 0.5,
   easing: 'ease',
@@ -49,10 +49,10 @@ const FixedStepParallax = ({
   rotate = 0,
   background = '#fff',
   duration = 500,
-  originX = 0,
-  originY = 0,
-  targetX = 0,
-  targetY = 0,
+  endX = 0,
+  endY = 0,
+  startX = 0,
+  startY = 0,
   easing = 'ease',
 }: FixedStepParallaxProps) => {
   const mainWrapperRef = useRef<HTMLDivElement | null>(null);
@@ -119,7 +119,7 @@ const FixedStepParallax = ({
 
   return (
     <FixedStepParallaxContext.Provider
-      value={{ duration, easing, targetX, targetY, rotate, originX, originY }}>
+      value={{ duration, easing, startX, startY, rotate, endX, endY }}>
       <FixedStepParallaxMainWrapper
         ref={mainWrapperRef}
         background={background}

diff --git a/src/components/FixedStepParallax/style.tsx b/src/components/FixedStepParallax/style.tsx
@@ -34,15 +34,15 @@ export const FixedStepParallaxItemWrapper = styled.div<FixedStepParallaxContextP
   flex-direction: column;
   opacity: 0;
   transition: ${({ duration, easing }) => `all ${duration / 1000}s ${easing}`};
-  transform: ${({ targetX, targetY, rotate }) =>
-    `translate(${getConvertedImageSize(targetX)}, ${getConvertedImageSize(
-      targetY
+  transform: ${({ startX, startY, rotate }) =>
+    `translate(${getConvertedImageSize(startX)}, ${getConvertedImageSize(
+      startY
     )}) rotate(${rotate}deg)`};
   z-index: 9999;
 
   &.active {
     opacity: 1;
-    transform: ${({ originX, originY }) =>
-      `translate(${originX}px, ${originY}px) rotate(0deg)`};
+    transform: ${({ endX, endY }) =>
+      `translate(${endX}px, ${endY}px) rotate(0deg)`};
   }
 `;
diff --git a/src/components/FlyInItemParallax/index.tsx b/src/components/FlyInItemParallax/index.tsx
@@ -17,8 +17,8 @@ export interface FlyInItemParallaxProps {
   background?: string;
   duration?: number;
   delay?: number;
-  targetX?: number;
-  targetY?: number;
+  startX?: number;
+  startY?: number;
   threshold?: number;
   gap?: number;
   easing?: Easing;
@@ -27,8 +27,8 @@ export interface FlyInItemParallaxProps {
 
 export interface FlyInItemParallaxContextProps {
   duration: number;
-  targetX: number;
-  targetY: number;
+  startX: number;
+  startY: number;
   delay: number;
   rotate: number;
   easing: Easing;
@@ -40,8 +40,8 @@ export interface FlyInItemParallaxItemProps {
 }
 
 const FlyInItemParallaxContext = createContext<FlyInItemParallaxContextProps>({
-  targetX: 0,
-  targetY: 100,
+  startX: 0,
+  startY: 100,
   rotate: 0,
   duration: 300,
   delay: 100,
@@ -56,8 +56,8 @@ const FlyInItemParallax = ({
   background = '#fff',
   duration = 300,
   rotate = 0,
-  targetX = 0,
-  targetY = 100,
+  startX = 0,
+  startY = 100,
   gap = 0,
   threshold = 0.3,
   justify = 'center',
@@ -100,7 +100,7 @@ const FlyInItemParallax = ({
 
   return (
     <FlyInItemParallaxContext.Provider
-      value={{ delay, rotate, duration, targetX, targetY, easing }}>
+      value={{ delay, rotate, duration, startX, startY, easing }}>
       <FlyInItemParallaxMainWrapper
         screenHeight={screenHeight}
         background={background}

diff --git a/src/components/FlyInItemParallax/style.tsx b/src/components/FlyInItemParallax/style.tsx
@@ -45,9 +45,9 @@ export const FlyInItemWrapper = styled.div<
   transition: ${({ duration, easing, delay, idx }) =>
     `all ${duration / 1000}s ${easing} ${(delay / 1000) * idx}s`};
 
-  transform: ${({ targetX, targetY, rotate }) =>
-    `translate(${getConvertedImageSize(targetX)}, ${getConvertedImageSize(
-      targetY
+  transform: ${({ startX, startY, rotate }) =>
+    `translate(${getConvertedImageSize(startX)}, ${getConvertedImageSize(
+      startY
     )}) rotate(${rotate}deg)`};
 
   &.active {

diff --git a/src/stories/components/FixedStepParallax.stories.tsx b/src/stories/components/FixedStepParallax.stories.tsx
@@ -33,10 +33,10 @@ const Template: StoryFn<FixedStepParallaxProps> = ({ ...args }) => {
         easing={args.easing}
         duration={args.duration}
         background={args.background}
-        originX={args.originX}
-        originY={args.originY}
-        targetX={args.targetX}
-        targetY={args.targetY}
+        endX={args.endX}
+        endY={args.endY}
+        startX={args.startX}
+        startY={args.startY}
         rotate={args.rotate}
         extra={args.extra}>
         <FixedStepParallax.Item>
@@ -99,10 +99,10 @@ export const Default = {
     background: '#fff',
     rotate: 0,
     duration: 500,
-    originX: 0,
-    originY: 0,
-    targetX: 100,
-    targetY: 0,
+    endX: 0,
+    endY: 0,
+    startX: 100,
+    startY: 0,
     easing: 'ease',
     extra: (
       <div

diff --git a/src/stories/components/FlyInItemParallax.stories.tsx b/src/stories/components/FlyInItemParallax.stories.tsx
@@ -68,8 +68,8 @@ const Template: StoryFn<FlyInItemParallaxProps> = ({ ...args }) => {
         <h2>EMPTY SPACE1</h2>
       </div>
       <FlyInItemParallax
-        targetY={args.targetY}
-        targetX={args.targetX}
+        startY={args.startY}
+        startX={args.startX}
         gap={args.gap}
         rotate={args.rotate}
         duration={args.duration}
@@ -135,9 +135,9 @@ export const Default = {
     delay: 100,
     background: '#fff',
     duration: 300,
-    rotate: 30,
-    targetX: 0,
-    targetY: 100,
+    rotate: 0,
+    startX: 0,
+    startY: 100,
     gap: 0,
     threshold: 0.3,
     justify: 'center',