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
Copy file name to clipboardExpand all lines: documentation/docs/usage/components/parallax-banner-component.md
+85-12Lines changed: 85 additions & 12 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -7,7 +7,7 @@ sidebar_position: 3
7
7
Component that sets up layers of `useParallax` elements to achieve a parallaxing banner. Enables the layering of images, or custom markup, with scroll effects in a container that hides overflow.
@@ -16,6 +16,23 @@ See some example [code with demos](/docs/examples/banners).
16
16
17
17
## Examples
18
18
19
+
There are two ways to setup a banner:
20
+
21
+
1. You can use the `<ParallaxBanner>`[`layers`](#with-the-layers-prop) prop.
22
+
2. You can define [`ParallaxBannerLayer`](#example-with-the-parallaxbannerlayer) as the `<ParallaxBanner>` children.
23
+
24
+
### Example with the ParallaxBannerLayer
25
+
26
+
Use the `ParallaxBannerLayer` component to define the `speed` and `image` for your banner. In this case, it will create a banner using a single image, that moves slower than the rate of scroll, and the edges of the image will never be visible.
Use the `layers` to supply a `speed` and `image` to your banner. In this case, it will create a banner using a single image, that moves slower than the rate of scroll, and the edges of the image will never be visible.
20
37
21
38
```jsx
@@ -36,7 +53,16 @@ You **must** define a style that gives the root `<div>` a `height` value otherwi
36
53
37
54
:::
38
55
39
-
### Multiple Layers
56
+
### Creating Multiple Layers
57
+
58
+
Define multiple Banner layer children with independent prop configurations.
Supply the `layers` prop with additional configuration for more images. Each layer can contain unique configurations.
42
68
@@ -58,13 +84,24 @@ Supply the `layers` prop with additional configuration for more images. Each lay
58
84
59
85
:::caution
60
86
61
-
**Layer order matters.** First element in the the array will appear on the bottom of the stacking context; last layer of the array will appear on top.
87
+
**Layer order matters.** First element in the the array or children will appear on the bottom of the stacking context; last layer of the array or children will appear on top.
62
88
63
89
:::
64
90
65
-
### Customized Layers
91
+
### Custom Layer Markup
66
92
67
-
You can pass your own markup or components to the `children` property of a `layer`.
93
+
This example defines a headline in the second layer.
You can also pass your own markup or components to the `children` property when using `layers`.
68
105
69
106
```jsx
70
107
<ParallaxBanner
@@ -82,15 +119,31 @@ You can pass your own markup or components to the `children` property of a `laye
82
119
/>
83
120
```
84
121
122
+
### Using a Custom Image Element
123
+
124
+
You don't need to use the `image` prop and can instead pass your own `img`, `picture`, `video` or custom image component. Use this if you need to use accessible images, custom image components, or other `img` attributes like `srcSet` or `loading`.
125
+
126
+
```jsx
127
+
<ParallaxBanner style={{ aspectRatio:'2 / 1' }}>
128
+
<ParallaxBannerLayer speed={-20}>
129
+
<img
130
+
src="https://foo.com/sahara.jpg"
131
+
alt="Sahara Desert landscape"
132
+
loading="lazy"
133
+
/>
134
+
</ParallaxBannerLayer>
135
+
</ParallaxBanner>
136
+
```
137
+
85
138
## Props
86
139
87
140
The following are all props that can be passed to the `<ParallaxBanner>` component:
|**disabled**|`boolean`| Disables _all_ parallax layers when enabled. |
92
-
|**layers**|`array`|An`array` of `objects` with layer properties:[see layer props below](/docs/usage/components/parallax-banner-component#banner-layers-prop)|
93
-
|`...rest`|`HTMLDivElement`| All other properties are spread to the `<div>`. |
|**disabled**|`boolean`| Disables _all_ parallax layers when enabled. |
145
+
|**layers**|`array`|Optional`array` of layers --[see layer props below](/docs/usage/components/parallax-banner-component#banner-layers-prop)|
146
+
|`...rest`|`HTMLDivElement`| All other properties are spread to the `<div>`. |
94
147
95
148
:::info
96
149
@@ -102,7 +155,9 @@ All other props are defined on the root `div` element.
102
155
103
156
:::
104
157
105
-
## Banner Layers Prop
158
+
## Banner Layer Props
159
+
160
+
The `ParallaxBannerLayer` the following configuration as props.
106
161
107
162
The `layers` prop takes an array of objects that represent each image (or custom children) of the parallax banner. The following properties describe a layer object:
108
163
@@ -113,11 +168,29 @@ The `layers` prop takes an array of objects that represent each image (or custom
113
168
|**image**|`string`|| Image source that will be applied as a CSS `background-image` on the layer set to `cover`. |
114
169
|`...rest`|`ParallaxElementConfig`|| All known parallax props will be passed to `useParallax`. [See all the parallax props](/docs/usage/parallax-props) that this hook will accept. All other properties are spread to the `<div>` representing the layer. |
0 commit comments