サインアップフォームとサインインフォームがスライド式に遷移するUIを作ってみました

こんにちは。nap5です。

サインアップフォームとサインインフォームがスライド式に遷移するUIを作ってみましたので、紹介したいと思います。

実際にあるサービスだとtypeformのようなイメージになります。

今回のデモでは簡単にサインアップフォームとサインインフォームの2つでトライしてみました。

スライド式に遷移する部分はFramerMotionを使用しています。

デモサイトです。

Welcome to tokimeki lion site

this is tokimeki lion site

react-slider-tailwind-react-hook-form.onrender.com

外部サイト

 

https://react-slider-tailwind-react-hook-form.onrender.com

デモコードです。

runtime-dawn-85h3jf - CodeSandbox

runtime-dawn-85h3jf by higashi.kota using @emotion/css, @emotion/react, @emotion/server, @emotion/styled, @fontsource/inter, @hookform/resolvers, @mui/material, @tidyjs/tidy, framer-motion

CodeSandbox

外部サイト

 

https://codesandbox.io/s/85h3jf

ステップ数が明確な機能ではマッチするのではと思います。

簡単ですが、以上です。

• WEB

データサイエンス・AI領域の専門集団 GRI