Skip to content

Commit c41ad13

Browse files
jscottsmithjscottsmith
committed
docs: link to props documented in the parallax controller package
1 parent 1c9dbf4 commit c41ad13

File tree

2 files changed

+14
-113
lines changed

2 files changed

+14
-113
lines changed

‎docs/parallax-component.md

Lines changed: 14 additions & 104 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,10 @@ The main component for applying scroll effects based on an elements position wit
66
import { Parallax } from 'react-scroll-parallax';
77
```
88

9+
# Examples
10+
11+
Some basic example of how to use the `<Parallax>` component.
12+
913
## Speed Control
1014

1115
The `speed` prop that will make an element's scroll speed appear to speed up or slow down. This is the simplest way to achieve a parallax effect.
@@ -39,112 +43,18 @@ const TranslateY = () => (
3943

4044
**NOTE:** Translate values without units default to `%` so `-20` becomes `-20%`.
4145

42-
## Props
43-
44-
The following are all props that can be passed to the `<Parallax>` component:
45-
46-
- [Props: Configuration](#props-configuration)
47-
- [Props: CSS Effects](#props-css-effects)
48-
- [Easing Presets](#easing-presets)
49-
- [Cubic Bezier Easing Function](#cubic-bezier-easing-function)
50-
- [Props: Callbacks](#props-callbacks)
51-
52-
### Props: Configuration
53-
54-
| Name | Type | Default | Description |
55-
| ------------------------------------- | :--------------------: | :------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
56-
| **speed** | `number` | | A value representing the elements scroll speed. If less than zero scroll will appear slower. If greater than zero scroll will appear faster. |
57-
| **easing** | `string` or `number[]` | | String representing an [easing preset](#easing-presets) or array of params to supply to a [cubic bezier easing function](#cubic-bezier-easing-function). |
58-
| **rootMargin** | `object` | | Margin to be applied as the bounds around an element. This will affect when an element is determined to be considered in the viewport. Example: `{ top: 100, right: 100, bottom: 100, left: 100 }` |
59-
| **disabled** | `boolean` | `false` | Disables parallax effects on individual elements when `true`. |
60-
| **className** | `string` | | Class names to be added to the outermost parallax element. |
61-
| **style** | `object` | | Style object to be added to the outermost parallax element. |
62-
| **tag** | `string` | `div` | HTML element tag name to be applied to the outermost parallax element. |
63-
| **shouldStartAnimationInitialInView** | `boolean` | `false` | Will start the animation at initial element position if the element is positioned inside the view when scroll is at zero. |
64-
| **startScroll** | `number` | | Scroll top value to begin the animation. When provided along with `endScroll` relative scroll values will be ignored. |
65-
| **endScroll** | `number` | | Scroll top value to end the animation. When provided along with `startScroll` relative scroll values will be ignored. |
66-
67-
### Props: CSS Effects
68-
69-
All props for creating CSS effects are defined by a **_start_** and **_end_** value represented by an `array`
70-
71-
```jsx
72-
<Parallax scale={[start, end]}`/>
73-
```
74-
75-
The **_start_** of an effect begins when the element's original position enters the viewport.
76-
77-
- The top of the element enters the bottom of the view.
46+
# Props
7847

79-
The **_end_** of an effect begins when the element's original position exits the viewport.
48+
Most props to configure a parallax element like CSS effects are documented and managed by the `parallax-controller`.
8049

81-
- the bottom of the element exits the top of the view.
50+
[See all the parallax props](https://parallax-controller.vercel.app/docs/usage/props) that this component will accept.
8251

83-
| Name | Type | Description |
84-
| -------------- | :----------------------: | ------------------------------------------------------------------------------------------------------------------------------------- |
85-
| **translateX** | `string[]` or `number[]` | Start and end translation on x-axis in `%` or `px`. If no unit is passed percent is assumed. Percent is based on the elements width. |
86-
| **translateY** | `string[]` or `number[]` | Start and end translation on y-axis in `%` or `px`. If no unit is passed percent is assumed. Percent is based on the elements height. |
87-
| **rotate** | `string[]` or `number[]` | Start and end rotation on z-axis in `deg`, `rad`, or `turn`. If no unit is passed `deg` is assumed. |
88-
| **rotateX** | `string[]` or `number[]` | Start and end rotation on x-axis in `deg`, `rad`, or `turn`. If no unit is passed `deg` is assumed. |
89-
| **rotateY** | `string[]` or `number[]` | Start and end rotation on y-axis in `deg`, `rad`, or `turn`. If no unit is passed `deg` is assumed. |
90-
| **rotateZ** | `string[]` or `number[]` | Start and end rotation on z-axis in `deg`, `rad`, or `turn`. If no unit is passed `deg` is assumed. |
91-
| **scale** | `number[]` | Start and end scale on x-axis and y-axis. |
92-
| **scaleX** | `number[]` | Start and end scale on x-axis. |
93-
| **scaleY** | `number[]` | Start and end scale on y-axis. |
94-
| **scaleZ** | `number[]` | Start and end scale on z-axis. |
95-
| **opacity** | `number[]` | Start and end opacity value. |
96-
97-
#### Easing Presets
98-
99-
The following easing values are preset and can be used as easing
100-
101-
```jsx
102-
<Parallax easing="easeInCubic" />
103-
```
104-
105-
```
106-
ease
107-
easeIn
108-
easeOut
109-
easeInOut
110-
easeInQuad
111-
easeInCubic
112-
easeInQuart
113-
easeInQuint
114-
easeInSine
115-
easeInExpo
116-
easeInCirc
117-
easeOutQuad
118-
easeOutCubic
119-
easeOutQuart
120-
easeOutQuint
121-
easeOutSine
122-
easeOutExpo
123-
easeOutCirc
124-
easeInOutQuad
125-
easeInOutCubic
126-
easeInOutQuart
127-
easeInOutQuint
128-
easeInOutSine
129-
easeInOutExpo
130-
easeInOutCirc
131-
easeInBack
132-
easeOutBack
133-
easeInOutBack
134-
```
135-
136-
#### Cubic Bezier Easing Function
137-
138-
Just like with CSS `cubic-bezier(0.2,-0.67,1,-0.62);`, you can supply the 4 params to a custom bezier function.
139-
140-
```jsx
141-
<Parallax easing={[0.2, -0.6, 1, -0.6]} />
142-
```
52+
## Props: Component Configuration
14353

144-
### Props: Callbacks
54+
The following props allow some configuration of the react component:
14555

146-
| Name | Type | Description |
147-
| -------------------- | :--------: | --------------------------------------------------------------------- |
148-
| **onProgressChange** | `function` | Callback for when the progress of an element in the viewport changes. |
149-
| **onEnter** | `function` | Callback for when an element enters the viewport. |
150-
| **onExit** | `function` | Callback for when an element exits the viewport. |
56+
| Name | Type | Default | Description |
57+
| ------------- | :------: | :------ | ---------------------------------------------------------------------- |
58+
| **className** | `string` | | Class names to be added to the outermost parallax element. |
59+
| **style** | `object` | | Style object to be added to the outermost parallax element. |
60+
| **tag** | `string` | `div` | HTML element tag name to be applied to the outermost parallax element. |

‎src/types.ts

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,6 @@
11
import { ParallaxElementConfig } from 'parallax-controller';
22

33
export interface ParallaxProps extends ParallaxElementConfig {
4-
/**
5-
* A number to slowdown `n < 0` or speed up `n > 0` the scroll speed of an element
6-
*
7-
* Example:
8-
*
9-
* speed={-1}
10-
*
11-
*/
12-
speed?: number;
134
/**
145
* Class names to be added to the outermost parallax element.
156
*/

0 commit comments

Comments
 (0)