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 36283fa

Browse files
docs: add custom effect examples
1 parent bb46212 commit 36283fa

File tree

6 files changed

+95
-3
lines changed

6 files changed

+95
-3
lines changed

‎documentation/docs/examples/advanced-banners.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
hide_title: true
33
title: Advanced Banners
4-
sidebar_position: 4
4+
sidebar_position: 6
55
---
66

77
import { AdvancedBannerTop } from '/src/components/advanced-banner-top';

‎documentation/docs/examples/banners.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
sidebar_position: 3
2+
sidebar_position: 5
33
---
44

55
import { ParallaxBannerSingle } from '/src/components/parallax-banner-single';
Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
---
2+
sidebar_position: 3
3+
---
4+
5+
import { CustomEffect } from '/src/components/custom-effect';
6+
7+
# Custom Effects
8+
9+
You can create your own custom effects by using the `onProgressChange` event, along with custom CSS variables. This allows the for animating any CSS property based on the scroll position of an element.
10+
11+
## CSS Variable Examples
12+
13+
With the `useParallax` hook, we can pass in a callback to the `onProgressChange` event. This callback will be called every time the scroll position changes. We can then use the `progress` value to update a CSS variable. Then, either in a CSS file or inline styles, we can use the `var(--progress)` to animate any CSS property.
14+
15+
```tsx
16+
function Example() {
17+
const parallax = useParallax({
18+
onProgressChange: (progress) => {
19+
if (parallax.ref.current) {
20+
// set progress to CSS variable
21+
parallax.ref.current.style.setProperty(
22+
"--progress",
23+
progress.toString()
24+
);
25+
}
26+
},
27+
});
28+
29+
return (
30+
<h1
31+
ref={parallax.ref}
32+
className="text-stroke"
33+
// use the progress variable to change the width of the stroke as progress updates
34+
style={{ textStrokeWidth: `calc(20px * var(--progress))` }}
35+
>
36+
Hello World
37+
</h1>
38+
);
39+
}
40+
```
41+
42+
:::info
43+
44+
Try it out for yourself in this CodeSandbox example: [Custom Effects Example](https://codesandbox.io/p/sandbox/react-scroll-parallax-text-stroke-klwy4l)
45+
46+
:::
47+
48+
Using this technique, we can animate any CSS property based on the scroll position of an element. Here's another example of animating the letter spacing and text shadow of a text element:
49+
50+
<CustomEffect/>
51+

‎documentation/docs/examples/easing.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
sidebar_position: 5
2+
sidebar_position: 7
33
---
44

55
import { EasingDemo } from '/src/components/easing-demo';
Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
.text-stroke {
2+
font-family: sans-serif;
3+
font-size: 15vmin;
4+
height: 100px;
5+
6+
-webkit-text-stroke-color: white;
7+
-webkit-text-stroke-width: 1px;
8+
9+
/* color:paleturquoise; */
10+
@apply text-blue-400;
11+
letter-spacing: calc(2vw * var(--progress) - 1vw);
12+
white-space: nowrap;
13+
text-shadow: 0 calc(4vw * var(--progress) - 2vw) 0 rgba(156, 163, 175, 0.2);
14+
}
Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import React from 'react';
2+
import { useParallax } from 'react-scroll-parallax';
3+
import { BgContainer } from '../bg-container';
4+
import './index.css';
5+
6+
export function CustomEffect() {
7+
const parallax = useParallax<HTMLHeadingElement>({
8+
onProgressChange: (progress) => {
9+
if (parallax.ref.current) {
10+
// set progress to CSS variable
11+
parallax.ref.current.style.setProperty(
12+
'--progress',
13+
progress.toString()
14+
);
15+
}
16+
},
17+
});
18+
return (
19+
<BgContainer>
20+
<div className="flex items-center justify-center">
21+
<h1 ref={parallax.ref} className="text-stroke">
22+
Hello World
23+
</h1>
24+
</div>
25+
</BgContainer>
26+
);
27+
}

0 commit comments

Comments
(0)

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