見出し画像

部屋割りロジックを使ったカードレイアウトを作ってみました

nap5

こんにちわ。nap5です。


部屋割りロジックを使ったカードレイアウトを作ってみたので、紹介したいと思います。


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



トランジションアニメーションにreact-springを使いました。


パラメータ調節GUIにlevaを使いました。


デモサイトです。


デモコードです。


levaのパラメータ調節の説明ですが、widthとheightは親コンテナのサイズ調節にあたり、minLeafSizeとmaxLeafSizeはそれぞれアイテムの最小サイズと最大サイズの調節になります。


LeafSizeの閾値を小さいレンジにシフトさせると、アイテムがより細かく按分され、大きいレンジにしふとさせると、アイテムがより粗く按分されます。


例えば、[80, 100]ならより細かくなり、[200,400]ならより粗くなります。



今回は部屋割りロジックとしてBinary Space Partitioningを使いました。


参考にした実装は以下になります。


よくみかけるPinterestっぽいカードレイアウトよりも、もしかしたら、面白いかもです。


awwwards系のサイトにはマッチしそうなんて思いました。例えばdense/scatterアニメーションなど。



最後に、Udemyでコースを公開しました。

GW中は無料クーポン・割引クーポンを発行しているので、よかったら覗いてみてください。



簡単ですが、以上です。

この記事が気に入ったらサポートをしてみませんか？