こんにちは！寿研究所のすぎです！
今回は、寿研究所のトップページに蛍のアニメーションを実装した方法について簡単に説明します。9月にちなんで、秋らしい風景をトップページに取り入れてみました。
YouTubeではより詳細に発信してますので、ぜひご覧ください！
蛍のアニメーションを作るために使ったツール
今回の蛍の実装には、「particles.js」というjavascriptのフレームワークを使用しました。このツールを使うことで、幾何学的な模様をランダムに飛ばすアニメーションを簡単に作成することができます。蛍の色やサイズ、飛ぶ速さなどは自由に調整ができるのが特徴です。
画像の生成に使ったツール
背景画像は「ImageFX」を使って生成しました。
このAIは非常に精度が高く、リアルな画像を簡単に作成できます。ただし、英語での入力が必要なので、指示文についてはChatGPTにお願いして書いてもらいました。
私は「秋の夜の田んぼ」「鈴虫」「満月」といったキーワードを入力して背景を生成し、それをトップページのバックグラウンドとして使用しました。
実装の具体的な流れ
蛍のアニメーションは「particles-js」というdivタグ（箱）を使って実装しました。
この箱をHTML内に設置し、position: absolute; で固定することで、画面内で蛍が飛び回るようにしています。
- position: absolute：蛍のアニメーションを画面の特定の位置に固定するために使用。
- z-index：レイヤーの順番を指定し、蛍が背景画像の上に表示されるように設定。
コードの詳細
実際に使用したコードの中で、蛍の数、色、形などを設定できます。
これにより、蛍がリアルに飛び回るアニメーションを実現しました。設定は非常に柔軟で、自由にカスタマイズできるため、他の場面でも応用可能です。
まとめ
今回の記事では、トップページに蛍のアニメーションを追加する手順を説明しました。9月の秋を感じるデザインを取り入れ、季節に合った雰囲気を演出できました。これからも季節ごとのデザインを楽しんでいきたいと思います。皆さんもぜひ、秋を楽しんでみてください！
ありがとうございました。
