WEB

gsapのObserverプラグインを使ってスクロール方向によるヘッダーの表示制御を実現してみました

nap5
 

こんにちは。nap5です。

gsapのObserverプラグインを使ってスクロール方向によるヘッダーの表示制御を実現してみましたので、紹介したいと思います。

note様のヘッダー挙動とかもそうですよね。

デモコードです。

empty-dew-55lu6x - CodeSandbox
empty-dew-55lu6x by higashi.kota using @emotion/css, @emotion/react, @emotion/server, @emotion/styled, @fontsource/inter, @tidyjs/tidy, chance, framer-motion, gsap
CodeSandbox
外部サイト
 
https://codesandbox.io/s/55lu6x

デモサイトです。

https://react-nextjs-layout-app.onrender.com
react-nextjs-layout-app.onrender.com
外部サイト
 
https://react-nextjs-layout-app.onrender.com

簡単ですが、以上です。

データ分析・AIの専門家集団 GRI

GRIへのお問い合わせはこちらから[データ分析・AIの専門家集団「GRI」と一緒に仕事をしませんか？ お問い合わせお待ちしております]

関連の記事