FramermotionのuseScrollフックで監視できるスクロールプログレス値を使ってマルチキャプションを動かしてみよう

1

2022年10月20日 6:00

こんにちわ。nap5です。

FramermotionのuseScrollフックで監視できるスクロールプログレス値を使ってマルチキャプションを動かしてみたので、紹介したいと思います。

デモサイトです。

デモコードです。

ポイントになるのは以下になります。

Changeコールバックがフックの変数についているので、それをイベントハンドラでハンドリングします。

取得できるプログレス値をrecoilでコンポーネント間で持ち回るために設定するだけです。

簡単ですが、以上です。

# React.js

1

診断を受けるとあなたの現在の業務委託単価を算出します。今後副業やフリーランスで単価を交渉する際の参考になります。また次の単価レンジに到達するためのヒントも確認できます。