３カラムで両端のAsideがstickyするTwitterのようなレイアウトをtailwindcssライブラリを使って実装してみた

こんにちわ。nap5です。


３カラムで両端のAsideがstickyするTwitterのようなレイアウトをtailwindcssライブラリを使って実装してみたので、紹介したいと思います。

両端のAsideがstickyする部分は上下両端をframer-motionのドキュメントページのようにぼかしを入れてみました。続きが少し気になる感を演出してみました。パディングをうまく取ることで実現しています。

デモサイトです。adsページになります。

Vite App

デモコードです。

hardcore-noether-lu37zc - CodeSandbox

真ん中のカラムにあるスライダーはsplidejsで実装しています。メニューが増えてくるとドラッグ等してオーバフローハンドリングする必要が出てくると思うので、予めスライダーにしています。

BODYのスクロールバーのハンドリングは以下のレポジトリを参考にプラグインを入れて対応しています。

使用しているプラグインは以下になります。

簡単ですが、以上です。