|
1 | 1 | # \<Parallax> |
2 | 2 |
|
3 | | -The main component for manipulating a DOM element's position based on it's position within the viewport. |
4 | | - |
5 | | -## Example |
| 3 | +The main component for applying scroll effects based on an elements position within the viewport. |
6 | 4 |
|
7 | 5 | ```jsx |
8 | 6 | import { Parallax } from 'react-scroll-parallax'; |
| 7 | +``` |
| 8 | + |
| 9 | +## Speed Control |
| 10 | + |
| 11 | +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. |
| 12 | + |
| 13 | +```jsx |
| 14 | +const SlowAndFast = () => ( |
| 15 | + <> |
| 16 | + <Parallax speed={-5}> |
| 17 | + <div className="slow" /> |
| 18 | + </Parallax> |
| 19 | + <Parallax speed={5}> |
| 20 | + <div className="fast" /> |
| 21 | + </Parallax> |
| 22 | + </> |
| 23 | +); |
| 24 | +``` |
9 | 25 |
|
| 26 | +**NOTE:** The `speed` prop simplifies the application of a `translateX` or `translateY` effect based on the `ParallaxController` scroll axis [TODO](#link) |
| 27 | + |
| 28 | +## Translate Controls |
| 29 | + |
| 30 | +If you need more fine tune control of the scroll position you can apply start and end transforms more directly. In this example the element begins with a `translateY(-20%)` and ends with `translateY(10%)` |
| 31 | + |
| 32 | +```jsx |
10 | 33 | const VerticalParallax = () => ( |
11 | | - <Parallax y={[-20, 20]}> |
| 34 | + <Parallax y={[-20, 10]}> |
12 | 35 | <div className="my-thing" /> |
13 | 36 | </Parallax> |
14 | 37 | ); |
15 | 38 | ``` |
16 | 39 |
|
17 | | -## Parallax Props |
| 40 | +**NOTE:** Translate values without units default to `%` so `-20` becomes `-20%`. |
| 41 | + |
| 42 | +## Props |
| 43 | + |
| 44 | +All props for creating effects are defined by a _start_ and _end_ value represented by an `array` -- for example: `[start, end]`. |
| 45 | + |
| 46 | +- The _start_ of an effect begins when the element's original position enters the viewport -- the top of the element enters the bottom of the view. |
| 47 | +- The _end_ of an effect begins when the element's original position exits the viewport -- the bottom of the element exits the top of the view. |
18 | 48 |
|
19 | 49 | The following are all props that can be passed to the `<Parallax>` component: |
20 | 50 |
|
21 | | -| Name | Type | Default | Description | |
22 | | -| -------------- | :----------------------: | :------- | ------------------------------------------------------------------------------------------------------------------------------------- | |
23 | | -| **x** | `string[]` or `number[]` | `[0, 0]` | 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. | |
24 | | -| **y** | `string[]` or `number[]` | `[0, 0]` | 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. | |
25 | | -| **className** | `string` | | Optionally pass additional class names to be added to the outermost parallax element. | |
26 | | -| **disabled** | `boolean` | `false` | Disables parallax effects on individual elements when `true`. | |
27 | | -| **styleInner** | `object` | | Optionally pass a style object to be added to the innermost parallax element. | |
28 | | -| **styleOuter** | `object` | | Optionally pass a style object to be added to the outermost parallax element. | |
29 | | -| **tagInner** | `string` | `div` | Optionally pass an element tag name to be applied to the innermost parallax element. | |
30 | | -| **tagOuter** | `string` | `div` | Optionally pass an element tag name to be applied to the outermost parallax element. | |
| 51 | +| Name | Type | Default | Description | |
| 52 | +| -------------- | :----------------------: | :------ | -------------------------------------------------------------------------------------------------------------------------------------------- | |
| 53 | +| **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. | |
| 54 | +| **x** | `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. | |
| 55 | +| **y** | `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. | |
| 56 | +| **rotate** | `string[]` or `number[]` | | Start and end rotation on z-axis in `deg`, `rad`, or `turn`. If no unit is passed `deg` is assumed. | |
| 57 | +| **rotateX** | `string[]` or `number[]` | | Start and end rotation on x-axis in `deg`, `rad`, or `turn`. If no unit is passed `deg` is assumed. | |
| 58 | +| **rotateY** | `string[]` or `number[]` | | Start and end rotation on y-axis in `deg`, `rad`, or `turn`. If no unit is passed `deg` is assumed. | |
| 59 | +| **rotateZ** | `string[]` or `number[]` | | Start and end rotation on z-axis in `deg`, `rad`, or `turn`. If no unit is passed `deg` is assumed. | |
| 60 | +| **className** | `string` | | Optionally pass additional class names to be added to the outermost parallax element. | |
| 61 | +| **disabled** | `boolean` | `false` | Disables parallax effects on individual elements when `true`. | |
| 62 | +| **styleInner** | `object` | | Optionally pass a style object to be added to the innermost parallax element. | |
| 63 | +| **styleOuter** | `object` | | Optionally pass a style object to be added to the outermost parallax element. | |
| 64 | +| **tagInner** | `string` | `div` | Optionally pass an element tag name to be applied to the innermost parallax element. | |
| 65 | +| **tagOuter** | `string` | `div` | Optionally pass an element tag name to be applied to the outermost parallax element. | |
0 commit comments