Reactのframerライブラリー使うためにNext.jsで簡単なギャラリーサイト作ってみた。
Reactで今までろくにアニメーション関係を扱ってなかったのでちょっと何かライブラリーがないか探してちょっと試すためだけに簡単なサイトをNext.jsで作ってみたという簡単な感想のような記事です。
サイトの趣旨
ただのよくある写真サイトです。東京の各場所の写真を載せたサイトです。スクロールで画像が出てきて写真をクリックするとスライドが出ててくる本当によくある感じのサイトです。
Next.jsで作っているので以下、vercelにあげています。
Tokyo Gallery Site
アニメーション
今までアニメーションといったらwebアニメーションを使っていたのですがいまいちReact上だと扱いにくったのでframerを使ってみました。コンポーネント上で手軽にアニメーションするCSSの値を渡せるのでアニメーションさせるのにもう躊躇わずにすみそうです。
スクロール量を画面ではなく要素から取得するAPIなんかもあるので今っぽいアニメーションは簡単に作れそうです。
これからの課題
普段AdobeのExtensionとかばっか作っているのですが最近動きのあるサイトも作りたいと欲が出てきていて今年はもっとフロントエンドの知識も蓄えたいと考えています。