24時間耐久レースのスライダーUIをframer-motionとsplidejsで作ってみよう
こんにちわ。nap5です。
24時間耐久レースのスライダーUIをframer-motionとsplidejsで作ってみたので、紹介したいと思います。
元ネタのサイトは以下になります。
framer-motionについてはこちらになります。
splidejsについてはこちらになります。
デモコードです。
デモサイトです。
framer-motionのuseAnimationControlsメソッドを使うとコンポーネントに対する動きの制御をハンディにしやすいです。今回はオリジナルよりもシンプルにしてデモを作ってみました。
オリジナルはメインコンテンツが縦にスライドしますが、これはスライドを2つ用意すると達成できるかもしれません。スライダーライブラリにmoveToSlideのようなAPIが提供されていれば、実現できそうです。
最近では、MENTAをはじめてみました。MENTAを使って提供していることを紹介している記事は以下になります。
また、Twitterでモックアップ動画を公開しているので、こちらもよかったら、覗いてみてください。
最後に、Udemyでコースを公開しました。
良かったら覗いてみてください。
また、コースの内容紹介記事は以下になります。
簡単ですが、以上です。
この記事が気に入ったらサポートをしてみませんか？