部屋割りロジックを使ったカードレイアウトを作ってみました
こんにちわ。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中は無料クーポン・割引クーポンを発行しているので、よかったら覗いてみてください。
簡単ですが、以上です。
この記事が気に入ったらサポートをしてみませんか?