Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 38f408c

Browse files
docs: add single banner image example
1 parent cf5ded2 commit 38f408c

File tree

8 files changed

+54
-20
lines changed

8 files changed

+54
-20
lines changed

‎documentation/docs/examples/banners.mdx‎

Lines changed: 32 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
sidebar_position: 3
33
---
44

5+
import { ParallaxBannerSingle } from '/src/components/parallax-banner-single';
56
import { ParallaxBannerImages } from '/src/components/parallax-banner-images';
67
import { ParallaxBannerWithHeadline } from '/src/components/parallax-banner-with-headline';
78
import { ParallaxBannerEmbedHeadline } from '/src/components/parallax-banner-embed-headline';
@@ -10,6 +11,35 @@ import { ParallaxBannerEmbedHeadline } from '/src/components/parallax-banner-emb
1011

1112
The following demonstrates some common usage of the [`<ParallaxBanner>`](/docs/usage/components/parallax-banner-component) component.
1213

14+
```ts
15+
import { ParallaxBanner } from 'react-scroll-parallax';
16+
```
17+
18+
## Example with a Single Image
19+
20+
A single parallaxing image within a banner is achieved by adding a single layer object with an `image` and `speed`:
21+
22+
```tsx
23+
const Component = () => {
24+
return (
25+
<ParallaxBanner
26+
layers={[{ image: '/static/banner.jpg', speed: -15 }]}
27+
className="aspect-[2/1]"
28+
/>
29+
);
30+
};
31+
```
32+
33+
<ParallaxBannerSingle />
34+
35+
Be sure to set a style by either a `className` or the `style` prop that will give the banner container a `height`. You could also use an aspect ratio like the example above which uses a class that sets the `aspect-ratio` to `2 / 1`.
36+
37+
:::tip
38+
39+
The parallax effect is more natural when the image moves slower than the page, `speed < 0`.
40+
41+
:::
42+
1343
## Example with Multiple Layers
1444

1545
This example uses two layers, one background and one foreground. The order of the defined layer determines the stacking of the each image: First in the array will appear at the back and be covered by subsequent layers.
@@ -20,8 +50,6 @@ The `speed` prop is used to make the layer move at it's own pace.
2050
The foreground `speed` is defined so that it will move faster than the background:
2151

2252
```tsx
23-
import { ParallaxBanner } from 'react-scroll-parallax';
24-
2553
const Component = () => {
2654
return (
2755
<ParallaxBanner
@@ -35,9 +63,9 @@ const Component = () => {
3563
};
3664
```
3765

38-
:::info
66+
:::tip
3967

40-
For the most _natural_ visual effect make the layer `speed` depend on the distance of the image: the closer the items in the image the **faster** they should move; the further away the **slower** they should move.
68+
For the most natural visual effect with multiple layers make each layer `speed` depend on the distance of the image: the closer the items in the image the **faster** they should move; the further away the **slower** they should move.
4169

4270
:::
4371

@@ -48,8 +76,6 @@ For the most _natural_ visual effect make the layer `speed` depend on the distan
4876
By defining `children` you can add any markup for a headline or any other custom elements. In the following example the headline is positioned absolutely over each banner layer.
4977

5078
```tsx
51-
import { ParallaxBanner } from 'react-scroll-parallax';
52-
5379
const Component = () => {
5480
return (
5581
<ParallaxBanner
@@ -74,8 +100,6 @@ const Component = () => {
74100
You can take the effect even further by embedding the headline in the scene. This can be done by defining another layer and assigning the markup to the `children` of that layer.
75101

76102
```tsx
77-
import { ParallaxBanner } from 'react-scroll-parallax';
78-
79103
const Component = () => {
80104
return (
81105
<ParallaxBanner

‎documentation/src/components/parallax-banner-embed-headline/index.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,7 @@ export const ParallaxBannerEmbedHeadline = () => {
66
<ParallaxBanner
77
layers={[
88
{
9-
image:
10-
'https://s3-us-west-2.amazonaws.com/s.cdpn.io/105988/banner-background.jpg',
9+
image: '/img/banner-background.jpg',
1110
speed: -30,
1211
},
1312
{
@@ -21,8 +20,7 @@ export const ParallaxBannerEmbedHeadline = () => {
2120
),
2221
},
2322
{
24-
image:
25-
'https://s3-us-west-2.amazonaws.com/s.cdpn.io/105988/banner-foreground.png',
23+
image: '/img/banner-foreground.png',
2624
speed: -10,
2725
},
2826
]}

‎documentation/src/components/parallax-banner-images/index.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,11 @@ export const ParallaxBannerImages = () => {
66
<ParallaxBanner
77
layers={[
88
{
9-
image:
10-
'https://s3-us-west-2.amazonaws.com/s.cdpn.io/105988/banner-background.jpg',
9+
image: '/img/banner-background.jpg',
1110
speed: -30,
1211
},
1312
{
14-
image:
15-
'https://s3-us-west-2.amazonaws.com/s.cdpn.io/105988/banner-foreground.png',
13+
image: '/img/banner-foreground.png',
1614
speed: -10,
1715
},
1816
]}
Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import React from 'react';
2+
import { ParallaxBanner } from 'react-scroll-parallax';
3+
4+
export const ParallaxBannerSingle = () => {
5+
return (
6+
<ParallaxBanner
7+
layers={[
8+
{
9+
image: '/img/banner.jpg',
10+
speed: -15,
11+
},
12+
]}
13+
className="aspect-[2/1] mb-lg"
14+
/>
15+
);
16+
};

‎documentation/src/components/parallax-banner-with-headline/index.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,11 @@ export const ParallaxBannerWithHeadline = () => {
66
<ParallaxBanner
77
layers={[
88
{
9-
image:
10-
'https://s3-us-west-2.amazonaws.com/s.cdpn.io/105988/banner-background.jpg',
9+
image: '/img/banner-background.jpg',
1110
speed: -30,
1211
},
1312
{
14-
image:
15-
'https://s3-us-west-2.amazonaws.com/s.cdpn.io/105988/banner-foreground.png',
13+
image: '/img/banner-foreground.png',
1614
speed: -10,
1715
},
1816
]}
846 KB
Loading[フレーム]
1.3 MB
Loading[フレーム]

‎documentation/static/img/banner.jpg‎

871 KB
Loading[フレーム]

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /