![見出し画像](https://assets.st-note.com/production/uploads/images/132411385/rectangle_large_type_2_8f87aa54240cf881a243ab21828db5a3.jpeg?width=1200)
ハンバーガーボタンをランダム生成するツールにグッときた
最近はWebサイトのギャラリーを眺めるよりも、CodePenの観察に勤しむ時間が楽しい私ですが。ひさしぶりにギーキィでグッときたPenに出会った。
Jamie CoulterさんというWebのデザイナー兼デベロッパーの方がCodePen上に手がけられたもので、ハンバーガーボタン(🍔 • ≡)をランダムに生成してくれるツールに仕上がっています。
Randomly generated Pure CSS menu icons w/ markup and SCSS
• • •
ページロード時に180個の🍔が生成されますが、基本となるいくつかのデザインに対し、ラインの数 / 長さや太さ / transform / イージング / transition等の値をランダムに割り当てることにより、全てが異なるものになります。もちろんページをリロードすればまた異なる180個が生成されることに。
![](https://assets.st-note.com/img/1709089902679-31znyZLqUh.png?width=1200)
オープン・クローズそれぞれに異なるスタイルが充てられ、ボタンを click すれば実際のアニメーションを確認することが出来ますし、
![](https://assets.st-note.com/img/1709091066673-FpRwWJko6o.png?width=1200)
ボタンの脇に表示されるコードボタン( </> )を click すれば、生成されたHTML • CSSソースコードを確認・取得することも可能になっています。
![](https://assets.st-note.com/img/1709100476792-Vo3UwOOxpe.png?width=1200)
• • •
いやぁ、素敵。HamburgerGPTかと思った。
ハンバーガーボタンってデザインがマンネリでワンパターンになりがちですし、アニメーションの実装をするのも然りで、かつ面倒、本当に面倒!なのでこれはとっても参考になりそうで有り難いです。大変好物だ。
CodePenなので全ソースが公開されていることですし、異なるデザインバリエーションを自分なりに加えてみるのも挑戦しがいがありそうですね。自分でもこうしたツールを作るのは好きですし、公開しているものもあれば非公開のものもありますが、工作欲をくすぐられます。
読んでいただきありがとうございます。丁寧な記事作りをこころがけていますので、記事が気に入ったなどでカンパをよせていただけるのなら励みになります。