Skip to content

Commit

Permalink
Merge pull request #202 from codedazur/fix/parallax-performance
Browse files Browse the repository at this point in the history 
Fix/parallax performance
  • Loading branch information
@thijsdaniels
thijsdaniels authored Oct 18, 2023
2 parents 8bae49d + 7855f66 commit 36bd287
Show file tree
Hide file tree
Showing 15 changed files with 513 additions and 190 deletions.
5 changes: 5 additions & 0 deletions .changeset/polite-rings-live.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@codedazur/react-parallax": minor
---

support scaling and offset
195 changes: 101 additions & 94 deletions apps/storybook/stories/react-parallax/useParallax.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,28 @@
import { Vector2 } from "@codedazur/essentials";
import {
AspectRatio,
Background,
Box,
Center,
Image,
Placeholder,
Row,
SizedBox,
Stack,
Text,
Transform,
black,
} from "@codedazur/react-components";
import { ParallaxFactor, useParallax } from "@codedazur/react-parallax";
import { useParallax } from "@codedazur/react-parallax";
import { faker } from "@faker-js/faker";
import { Meta, StoryObj } from "@storybook/react";
import { ReactNode } from "react";
import docs from "./useParallax.docs.mdx";
import layerOne from "./diorama/layer-one.png";
import layerTwo from "./diorama/layer-two.png";
import layerThree from "./diorama/layer-three.png";
import layerFour from "./diorama/layer-four.png";
import styled from "styled-components";
import layerFive from "./diorama/layer-five.png";
import layerFour from "./diorama/layer-four.png";
import layerOne from "./diorama/layer-one.png";
import layerSix from "./diorama/layer-six.png";
import layerThree from "./diorama/layer-three.png";
import layerTwo from "./diorama/layer-two.png";
import docs from "./useParallax.docs.mdx";

const meta: Meta = {
title: "react-parallax/useParallax",
Expand All @@ -39,11 +42,14 @@ export const Default: StoryObj = {
<Placeholder height="100vh">
<Row gap="1rem">
{[-0.5, 0, 0.5, 1, 1.5].map((factor, index) => (
<Parallax key={index} factor={factor}>
<Placeholder width="10rem" height="10rem">
<Text>{factor}</Text>
</Placeholder>
</Parallax>
<Placeholder
key={index}
ref={useParallax({ factor })}
width="10rem"
height="10rem"
>
<Text>{factor}</Text>
</Placeholder>
))}
</Row>
</Placeholder>
Expand All @@ -52,101 +58,102 @@ export const Default: StoryObj = {
),
};

const Parallax = ({
factor,
children,
}: {
factor: ParallaxFactor;
children?: ReactNode;
}) => {
const { x, y } = useParallax({ factor });

return (
<Transform x={x} y={y}>
{children}
</Transform>
);
export const Heroes: StoryObj = {
render: () => (
<Box padding="10vw" flex={{ direction: "column", gap: "10vw" }}>
<Hero />
<Hero />
<Hero />
<Hero />
<Hero />
</Box>
),
};

export const Hero: StoryObj = {
render: () => (
<>
const Hero = () => {
const ref = useParallax<HTMLImageElement>({
factor: 0.5,
cover: true,
});

return (
<Box shape="rounded">
<Stack>
<Parallax factor={0.5}>
<Placeholder height="40rem" crossed />
</Parallax>
<Center>
<Text>{faker.commerce.productName()}</Text>
</Center>
<AspectRatio ratio={16 / 9}>
<Image
ref={ref}
src={faker.image.urlPicsumPhotos({ width: 1920, height: 1080 })}
alt=""
/>
</AspectRatio>
<Background $color={black.alpha(0.5)} style={{ zIndex: 1 }}>
<Center>
<Title>{faker.commerce.productName()}</Title>
</Center>
</Background>
</Stack>
<SizedBox height="200vh" />
</>
),
</Box>
);
};

const Title = styled(Text)`
font-size: 2.5vw;
`;

export const Diorama: StoryObj = {
render: () => (
<>
<Center>
<Stack>
<Parallax factor={0.7}>
<Image src={layerOne} alt="" />
</Parallax>
<Parallax factor={0.75}>
<Image src={layerTwo} alt="" />
</Parallax>
<Parallax factor={0.85}>
<Image src={layerThree} alt="" />
</Parallax>
<Parallax factor={0.95}>
<Image src={layerFour} alt="" />
</Parallax>
<Parallax factor={1}>
<Image src={layerFive} alt="" />
</Parallax>
<Parallax factor={1}>
<Image src={layerSix} alt="" />
</Parallax>
</Stack>
</Center>
<SizedBox height="200vh" />
</>
),
render: function Diorama() {
return (
<>
<Center>
<Stack>
<Image src={layerOne} ref={useParallax({ factor: 0.6 })} alt="" />
<Image src={layerTwo} ref={useParallax({ factor: 0.7 })} alt="" />
<Image src={layerThree} ref={useParallax({ factor: 0.8 })} alt="" />
<Image src={layerFour} ref={useParallax({ factor: 0.9 })} alt="" />
<Image src={layerFive} ref={useParallax({ factor: 1 })} alt="" />
<Image src={layerSix} ref={useParallax({ factor: 1 })} alt="" />
</Stack>
</Center>
<SizedBox height="200vh" />
</>
);
},
};

export const NonLinear: StoryObj = {
render: () => (
<>
<Placeholder height="100vh">
<Parallax
factor={({ x, y }) =>
new Vector2(5 * Math.sqrt(x), 0.005 * Math.pow(y, 2))
}
>
<Placeholder width="10rem" height="10rem">
render: function NonLinear() {
const ref = useParallax<HTMLDivElement>({
factor: ({ x, y }) =>
new Vector2(5 * Math.sqrt(x), 0.005 * Math.pow(y, 2)),
});

return (
<>
<Placeholder height="100vh">
<Placeholder ref={ref} width="10rem" height="10rem">
<Text style={{ fontFamily: "system-ui" }}>5⋅√x</Text>
<Text style={{ fontFamily: "system-ui" }}>0.005⋅y²</Text>
</Placeholder>
</Parallax>
</Placeholder>
<SizedBox width="200vw" height="100vh" />
</>
),
</Placeholder>
<SizedBox width="200vw" height="100vh" />
</>
);
},
};

export const Dynamic: StoryObj = {
render: () => (
<>
<Placeholder height="100vh">
<Parallax
factor={({ x, y }) =>
new Vector2(0, y < 200 ? y : y > 400 ? y - 200 : 200)
}
>
<Placeholder width="10rem" height="10rem" />
</Parallax>
</Placeholder>
<SizedBox width="200vw" height="100vh" />
</>
),
render: function Dynamic() {
const ref = useParallax<HTMLDivElement>({
factor: ({ y }) => new Vector2(0, y < 200 ? y : y > 400 ? y - 200 : 200),
});

return (
<>
<Placeholder height="100vh">
<Placeholder ref={ref} width="10rem" height="10rem" />
</Placeholder>
<SizedBox width="200vw" height="100vh" />
</>
);
},
};
Loading

0 comments on commit 36bd287

Please sign in to comment.