見出し画像

splidejsとframer-motionを組み合わせてスライドと説明文を連動させたインタラクティブなスライダーを作ってみよう

nap5

こんにちわ。nap5です。



splidejsとframer-motionを組み合わせてスライドと説明文を連動させたインタラクティブなスライダーを作ってみたので、紹介したいと思います。


splidejsライブラリはこちらになります。



framer-motionライブラリはこちらになります。


Twiiterにも投稿してみました。


以下のデモですが、不安定のため、zipにしたものも添付します。zipファイルダウンロード後、展開します。展開後のディレクトリに移動した後、以下のコマンド打つとデモが動きます。


$ cd 展開後のディレクトリ
$ yarn install
$ yarn dev


以下のcodesandboxのデモが見れない場合のフォールバックとしてrenderというホスティングサービスでデプロイしたものも用意しました。





デモサイトです。


デモコードです。


move,moved,visibleのコールバック関数を使うとデモのような動きを実現できました。


最近では、MENTAをはじめてみました。MENTAを使って提供していることを紹介している記事は以下になります。


また、Twitterでモックアップ動画を公開しているので、こちらもよかったら、覗いてみてください。


最後に、Udemyでコースを公開しました。
良かったら覗いてみてください。

https://www.udemy.com/course/count-down-up-using-javascript-animation-api/


また、コースの内容紹介記事は以下になります。

簡単ですが、以上です。


いいなと思ったら応援しよう！