![見出し画像](https://assets.st-note.com/production/uploads/images/77651641/rectangle_large_type_2_87bb986b99c0bc0785aa0e19d2bd129d.png?width=1200)
部屋割りロジックを使ったカードレイアウトを作ってみました
こんにちわ。nap5です。
部屋割りロジックを使ったカードレイアウトを作ってみたので、紹介したいと思います。
Twitterにも投稿してみました。
I made this grid layout using bsp.#react #javascript #BinarySpacePartitioning #100DaysOfCode
— nap5 (@napzak5) June 21, 2022
reference.https://t.co/Y4vSZuByWF
demo site.https://t.co/0DFhfWt94r
demo code.https://t.co/MMjUbbsKfX
トランジションアニメーションにreact-springを使いました。
パラメータ調節GUIにlevaを使いました。
デモサイトです。
デモコードです。
levaのパラメータ調節の説明ですが、widthとheightは親コンテナのサイズ調節にあたり、minLeafSizeとmaxLeafSizeはそれぞれアイテムの最小サイズと最大サイズの調節になります。
LeafSizeの閾値を小さいレンジにシフトさせると、アイテムがより細かく按分され、大きいレンジにしふとさせると、アイテムがより粗く按分されます。
例えば、[80, 100]ならより細かくなり、[200,400]ならより粗くなります。
今回は部屋割りロジックとしてBinary Space Partitioningを使いました。
参考にした実装は以下になります。
よくみかけるPinterestっぽいカードレイアウトよりも、もしかしたら、面白いかもです。
awwwards系のサイトにはマッチしそうなんて思いました。例えばdense/scatterアニメーションなど。
最後に、Udemyでコースを公開しました。
GW中は無料クーポン・割引クーポンを発行しているので、よかったら覗いてみてください。
簡単ですが、以上です。
この記事が気に入ったらサポートをしてみませんか?