Skip to content

Commit dcffeaf

Browse files
jscottsmithjscottsmith
committed
docs: setup tailwind in docs and add examples
1 parent 70232c8 commit dcffeaf

File tree

17 files changed

+805
-16
lines changed

17 files changed

+805
-16
lines changed

‎documentation/docs/examples/_category_.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"label": "Examples",
3+
"position": 3
4+
}

‎documentation/docs/examples/how-it-works.mdx

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import { ElementProgress } from '/src/components/element-progress';
2+
import { HowItWorks } from '/src/components/how-it-works';
3+
import { BeyondCSSEffects } from '/src/components/beyond-css-effects';
4+
5+
# How it works
6+
7+
As the element scrolls past the viewport a css translate effect is applied based on the original element's position relative to the viewport. Using the speed will automatically apply a translateY css style (or translateX if the scroll axis is horizontal).
8+
9+
```tsx
10+
<Parallax speed={-10} />
11+
<Parallax speed={10} />
12+
```
13+
14+
<HowItWorks />
15+
16+
## Progress is relative to the view
17+
18+
All effects are applied based on the original element's progress. Progress begins as the elements top edge enters the bottom of the view. It ends as the bottom of the element leaves the top of the view.
19+
20+
```tsx
21+
<Parallax
22+
onProgressChange={(progress) => setProgress(progress)}
23+
onEnter={() => setEntered(true)}
24+
onExit={() => setEntered(false)}
25+
/>
26+
```
27+
28+
<ElementProgress />
29+
30+
## Beyond Parallax: CSS effects
31+
32+
Additional CSS effects, like opacity, scale and rotation can be applied based on progress, even with some easing.
33+
34+
```tsx
35+
<Parallax
36+
translateX={['-400px', '0px']}
37+
scale={[0.75, 1]}
38+
rotate={[-180, 0]}
39+
easing="easeInQuad"
40+
/>
41+
```
42+
43+
<BeyondCSSEffects />

‎documentation/docs/migration-guides/_category_.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
{
22
"label": "Migration Guides",
3-
"position": 2
3+
"position": 4
44
}

‎documentation/docs/usage/components/_category_.json

Lines changed: 0 additions & 4 deletions
This file was deleted.

‎documentation/package.json

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,10 +17,12 @@
1717
"@docusaurus/core": "2.0.0-beta.14",
1818
"@docusaurus/preset-classic": "2.0.0-beta.14",
1919
"@mdx-js/react": "^1.6.21",
20+
"classnames": "^2.3.1",
2021
"clsx": "^1.1.1",
2122
"prism-react-renderer": "^1.2.1",
2223
"react": "^17.0.1",
23-
"react-dom": "^17.0.1"
24+
"react-dom": "^17.0.1",
25+
"react-scroll-parallax": "^3.0.0-beta.7"
2426
},
2527
"browserslist": {
2628
"production": [
@@ -33,5 +35,8 @@
3335
"last 1 firefox version",
3436
"last 1 safari version"
3537
]
38+
},
39+
"devDependencies": {
40+
"tailwindcss": "^3.0.15"
3641
}
37-
}
42+
}

‎documentation/postcss.config.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
module.exports = {
2+
plugins: {
3+
tailwindcss: {},
4+
autoprefixer: {},
5+
},
6+
};

‎documentation/src/components/beyond-css-effects/index.tsx

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import React from 'react';
2+
import { Parallax } from 'react-scroll-parallax';
3+
import { BgContainer } from '../bg-container';
4+
5+
export const BeyondCSSEffects = () => {
6+
return (
7+
<BgContainer>
8+
<Parallax
9+
translateX={['-400px', '0px']}
10+
scale={[0.75, 1]}
11+
rotate={[-180, 0]}
12+
easing="easeInQuad"
13+
className="rounded-lg bg-gray-600 bg-opacity-50"
14+
>
15+
<div className="border-2 border-blue-200 border-solid flex items-center justify-center bg-blue-400 h-48 w-48 rounded-lg">
16+
<p className="text-center font-bold uppercase">Heyo!</p>
17+
</div>
18+
</Parallax>
19+
</BgContainer>
20+
);
21+
};

‎documentation/src/components/bg-container/index.tsx

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import React from 'react';
2+
import { PropsWithChildren } from 'react';
3+
4+
export const BgContainer = (props: PropsWithChildren<{}>) => {
5+
return (
6+
<div className="relative my-2xl bg-gray-900 px-lg py-96 w-full rounded-md px-bg text-black overflow-hidden">
7+
{/* <div className="h-screen" /> */}
8+
<div className="flex flex-row items-center justify-evenly w-full">
9+
{props.children}
10+
</div>
11+
{/* <div className="h-screen" /> */}
12+
</div>
13+
);
14+
};

‎documentation/src/components/element-progress/index.tsx

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
import cx from 'classnames';
2+
import React, { useState } from 'react';
3+
import { Parallax } from 'react-scroll-parallax';
4+
import { BgContainer } from '../bg-container';
5+
6+
export const ElementProgress = () => {
7+
const [progress, setProgress] = useState(0);
8+
const [entered, setEntered] = useState(false);
9+
const exited = !entered;
10+
return (
11+
<BgContainer>
12+
<Parallax
13+
onProgressChange={(progress) => setProgress(progress)}
14+
onEnter={() => setEntered(true)}
15+
onExit={() => setEntered(false)}
16+
className="relative rounded-lg bg-gray-600 bg-opacity-50"
17+
>
18+
<div className="absolute inset-0 z-10 flex items-center justify-center border-2 border-gray-400 border-solid bg-gray-600 rounded-lg">
19+
<p className="text-center font-bold">Parallax Element</p>
20+
</div>
21+
22+
<div className="relative flex items-center justify-center h-48 w-48">
23+
<div
24+
className={cx('absolute -top-48 text-sm p-sm rounded-md', {
25+
'bg-green-300': entered,
26+
'bg-gray-500': !entered,
27+
})}
28+
>
29+
<div>Top entered:</div>
30+
<div
31+
className={cx('font-medium text-xl text-center', {
32+
'text-white': !entered,
33+
})}
34+
>
35+
{entered.toString()}
36+
</div>
37+
<div className="absolute left-1/2 top-full border-dotted border-gray-400 border-r-2 h-48" />
38+
</div>
39+
40+
<div
41+
className="absolute flex items-center -left-48 text-sm bg-yellow-300 p-sm rounded-md"
42+
style={{
43+
top: `${(progress * 100).toFixed(2)}%`,
44+
height: 80,
45+
marginTop: -40,
46+
}}
47+
>
48+
<div>
49+
<div className="w-full">Progress</div>
50+
<div className="font-medium text-xl text-right tabular-nums">
51+
{progress.toFixed(3)}
52+
</div>
53+
</div>
54+
<div
55+
className="absolute left-full top-1/2 border-dotted border-gray-400 border-b-2 w-48"
56+
style={{ marginTop: -1 }}
57+
/>
58+
</div>
59+
60+
<div
61+
className={cx('absolute -bottom-48 text-sm p-sm rounded-md', {
62+
'bg-red-300': exited,
63+
'bg-gray-500': !exited,
64+
})}
65+
>
66+
<div>Bottom exited:</div>
67+
<div
68+
className={cx('font-medium text-xl text-center', {
69+
'text-white': !exited,
70+
})}
71+
>
72+
{exited.toString()}
73+
</div>
74+
<div className="absolute left-1/2 bottom-full border-dotted border-gray-400 border-r-2 h-48" />
75+
</div>
76+
</div>
77+
</Parallax>
78+
</BgContainer>
79+
);
80+
};

‎documentation/src/components/how-it-works/index.tsx

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import React from 'react';
2+
import { Parallax } from 'react-scroll-parallax';
3+
import { BgContainer } from '../bg-container';
4+
5+
export const HowItWorks = () => {
6+
return (
7+
<BgContainer>
8+
<Parallax speed={-10} className="rounded-lg bg-gray-600 bg-opacity-50">
9+
<div className="border-2 border-red-200 border-solid flex items-center justify-center bg-red-400 h-24 md:h-48 w-24 md:w-48 rounded-lg">
10+
<p className="text-center font-bold">Slower</p>
11+
</div>
12+
</Parallax>
13+
<Parallax speed={10} className="rounded-lg bg-gray-600 bg-opacity-50">
14+
<div className="border-2 border-green-200 border-solid flex items-center justify-center bg-green-400 h-24 md:h-48 w-24 md:w-48 rounded-lg">
15+
<p className="text-center font-bold">Faster</p>
16+
</div>
17+
</Parallax>
18+
</BgContainer>
19+
);
20+
};

‎documentation/src/css/custom.css

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
1+
/* @tailwind base; */
2+
@import url(./tailwind-custom-base.css);
3+
@tailwind components;
4+
@tailwind utilities;
5+
16
/**
27
* Any CSS included here will be global. The classic template
38
* bundles Infima by default. Infima is a CSS framework designed to
@@ -16,6 +21,18 @@
1621
--ifm-code-font-size: 95%;
1722
}
1823

24+
.px-bg {
25+
background-image: url(/static/img/bg-px-light.svg);
26+
background-color: rgb(246, 248, 250);
27+
border: 1px solid #eee;
28+
}
29+
30+
html[data-theme='dark'] .px-bg {
31+
background-image: url(/static/img/bg-px.svg);
32+
background-color: rgb(40, 42, 54);
33+
border: 1px solid #444;
34+
}
35+
1936
.docusaurus-highlight-code-line {
2037
background-color: rgba(0, 0, 0, 0.1);
2138
display: block;

0 commit comments

Comments
 (0)