ヒーローセクションの絵文字の表示の仕方について、調査する

[kagomen]

絵文字に動きをどうやってつけるか、調査する

関連リンク

#173

[kazzyfrog]

tailwind cssで作成されたオープンソースのコンポーネント集のサイト（Hyper UI）に、
それっぽいの載ってたので、参考に載せておきます：
https://www.hyperui.dev/blog/animation-duration-delay-with-tailwindcss

tailwindのアニメーションで、
絵文字が、ふわふわ跳ねている？浮いている？感じの配置はできそう！

[kazzyfrog]

実装の流れは、ざっくりそんな感じになるかと思います！
ただ、ライブラリとか、色々検証してみて、実装しやすい方法でやる感じで良いかもです！

例えば、絵文字をランダムで最大N個まで取得して、決められた場所に配置してから、動かすとかでもいいかもです！

[kagomen]

すごい簡単なアニメーションならCSSとか、tailwindで実装できると思います！

ライブラリとか、色々検証してみて、実装しやすい方法でやる感じで良いかもです！

了解です！🙏

絵文字をランダムで最大N個まで取得して、決められた場所に配置してから、動かすとかでもいいかもです！

たしかに、何人参加してくれるかわからないですが、一気に表示できる絵文字数の限度は20~30くらいな気がしますね…
そこらへんの表示の仕方も、考えた方が良さそうですね！
（例えばスロットみたいにぐるぐる繰り替えすとか……）

[kazzyfrog]

決められた場所に配置してから、動かすとかでもいいかもです！

このような、そこまで難しくない表示の仕方であれば、tailwindのアニメーションでもできそうかもです！

いくつか、使えそうな？tailwindのアニメーションのサイト見つけたら貼っていきます！！

• https://github.com/canopas/tailwind-animations-examples
• https://tail-animista.vercel.app/play/attention/vibrate/vibrate-1
• https://www.tailwindcss-animated.com/configurator.html?animation=bounce&duration=750

5/4追加

• https://www.transition.style

[kazzyfrog]

難しそうだったら、一旦tailwindのシンプルなアニメーションとかで実装して、
もうしこしリッチにしたくなったら、おいおいアニメーションライブラリ等を導入する感じでもいいかもです！

[kagomen]

一旦tailwindのシンプルなアニメーションとかで実装して、
もうしこしリッチにしたくなったら、おいおいアニメーションライブラリ等を導入する感じでもいいかも

同意です……！

[kazzyfrog]

思ったのは、ヒーローセクションも、appleの絵文字を使うのはグレーになりそうなので、
twimojiになりそう？かなと思うのですが、その場合背景は赤より白のほうがいいかも？と少し思いました！

個人的には、twimojiは２Dというか、のぺっとしていて、
appleのと違ってボーダーがはっきりしないので、赤系の絵文字が背景と同化しそうかもです

[kagomen]

なるほどです！
背景白にするのと、他には（できるかわかりませんが）絵文字に影をつけたりしたら解決できそうです！
背景白にする方が楽かもですね👀