You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The [`<ParallaxProvider />`](#parallaxprovider) should wrap the component tree that contains all `<Parallax />` components. This should be a top level component like `<AppContainer />`. For example:
32
+
The [`<ParallaxProvider>`](#parallaxprovider) should wrap the component tree that contains all `<Parallax>` components. This should be a top level component like `<AppContainer>`. For example:
@@ -43,7 +43,6 @@ class AppContainer extends Component {
43
43
);
44
44
}
45
45
}
46
-
47
46
```
48
47
49
48
Import the `Parallax` component and use it anywhere within the provider like so:
@@ -66,25 +65,81 @@ const ParallaxImage = () => (
66
65
67
66
**NOTE:** Scroll state and positions of elements on the page are cached for performance reasons. This means that if the page height changes (most likely from [images loading](#example-usage-of-context)) after `<Parallax />` components are mounted the controller won't properly determine when the elements are in view. To correct this you can call the `parallaxController.update()` method from any child component of the `<ParallaxProvider />` via `context`. More details on how here: [Parallax Controller Context](#parallax-controller-context).
68
67
69
-
## \<Parallax> Props
68
+
## \<Parallax>
69
+
70
+
The main component for manipulating an element's position based on scroll position within the viewport.
71
+
72
+
### Props
70
73
71
-
The following are all props that can be passed to the React `<Parallax />` component:
74
+
The following are all props that can be passed to the `<Parallax>` component:
|**className**|`String`|| Optionally pass additional class names to be added to the outer most parallax element. |
78
+
|**className**|`String`|| Optionally pass additional class names to be added to the outermost parallax element.|
76
79
|**disabled**|`Boolean`|`false`| Determines if the component will have parallax offsets applied. If `true` parallax styles are completely removed from the element and it is no longer updated. |
77
80
|**offsetXMax**|`Number` or `String`|`0`| Maximum **x** offset in `%` or `px`. If no unit is passed percent is assumed. Percent is based on the elements width. |
78
81
|**offsetXMin**|`Number` or `String`|`0`| Minimum **x** offset in `%` or `px`. If no unit is passed percent is assumed. Percent is based on the elements width. |
79
82
|**offsetYMax**|`Number` or `String`|`0`| Maximum **y** offset in `%` or `px`. If no unit is passed percent is assumed. Percent is based on the elements height. |
80
83
|**offsetYMin**|`Number` or `String`|`0`| Minimum **y** offset in `%` or `px`. If no unit is passed percent is assumed. Percent is based on the elements height. |
81
84
|**slowerScrollRate**|`Boolean`|`false`| Internally swaps the min/max offset y values of the parallax component to give the appearance of moving faster or slower than the default rate of scroll. |
82
-
|**styleInner**|`Object`|| Optionally pass a style object to be added to the innermost parallax element|
83
-
|**styleOuter**|`Object`|| Optionally pass a style object to be added to the outermost parallax element|
85
+
|**styleInner**|`Object`|| Optionally pass a style object to be added to the innermost parallax element.|
86
+
|**styleOuter**|`Object`|| Optionally pass a style object to be added to the outermost parallax element.|
84
87
|**tag**|`String`|`div`| Optionally pass an element tag name to be applied to the outermost parallax element. |
85
88
89
+
## \<ParallaxBanner>
90
+
91
+
Component that utilizes `<Parallax>` components to achieve a parallaxing banner effect.
92
+
93
+
### Example Usage
94
+
95
+
Use the `layers` prop to indicate all images, offset amounts and scroll rates. Optionally pass additional children to be rendered. Styles of the outermost banner element can also be changed. Here's an example:
96
+
97
+
```jsx
98
+
<ParallaxBanner
99
+
className="your-class"
100
+
layers={[
101
+
{
102
+
image:'https://foo.com/foo.jpg',
103
+
amount:0.1,
104
+
slowerScrollRate:false,
105
+
},
106
+
{
107
+
image:'https://foo.com/bar.jpg',
108
+
amount:0.2,
109
+
slowerScrollRate:false,
110
+
},
111
+
]}
112
+
style={{
113
+
height:'500px',
114
+
}}
115
+
>
116
+
<h1>Banner Children</h1>
117
+
</ParallaxBanner>
118
+
```
119
+
120
+
### Props
121
+
122
+
The following are all props that can be passed to the `<ParallaxBanner>` component:
|**amount**|`Number`| A value from `0 – 1` that represents the vertical offset to be applied to the current layer, `0.1` would equal a `10%` offset on the top and bottom. |
138
+
|**image**|`String`| Image source that will be applied as a CSS background image on the layer. |
139
+
|**slowerScrollRate**|`Number`| Indicates whether the layer should move faster or slower than the default rate of scroll. |
140
+
86
141
## \<ParallaxProvider>
87
-
142
+
88
143
The `<ParallaxProvider />` component is meant to wrap a top level component in your application and is necessary to provide access though React's context API to the parallax controller. This component should only be used once in you app, for instance in an `<AppContainer />` component that won't be mounted/unmounted during route changes. Like so:
89
144
90
145
```jsx
@@ -93,13 +148,13 @@ const AppContainer = () => (
93
148
<Router>
94
149
<App />
95
150
</Router>
96
-
</ParallaxProvider>
151
+
</ParallaxProvider>
97
152
);
98
153
```
99
154
100
155
### Parallax Controller Context
101
156
102
-
Access the Parallax Controller via [React context](https://facebook.github.io/react/docs/context.html) in any components rendered within a `<ParallaxProvider />` by defining the `contextTypes` like so:
157
+
Access the Parallax Controller via [React context](https://facebook.github.io/react/docs/context.html) in any components rendered within a `<ParallaxProvider>` by defining the `contextTypes` like so:
0 commit comments