FramermotionのuseScrollフックで監視できるスクロールプログレス値を使ってマルチキャプションを動かしてみよう
2022年10月20日 6:00
こんにちわ。nap5です。
FramermotionのuseScrollフックで監視できるスクロールプログレス値を使ってマルチキャプションを動かしてみたので、紹介したいと思います。
デモサイトです。
https://react-marked-caption-framermotion-scroll.onrender.com/
デモコードです。
https://codesandbox.io/s/x26yu1
ポイントになるのは以下になります。
https://www.framer.com/docs/use-scroll/##page-scroll
Changeコールバックがフックの変数についているので、それをイベントハンドラでハンドリングします。
取得できるプログレス値をrecoilでコンポーネント間で持ち回るために設定するだけです。
簡単ですが、以上です。
診断を受けるとあなたの現在の業務委託単価を算出します。今後副業やフリーランスで単価を交渉する際の参考になります。また次の単価レンジに到達するためのヒントも確認できます。