自分のブログ用に、季節のアニメションとちょっとした遊び心を加えた「Kakashi Seasonal Effects」を作ってみました。
最初は、画面に稲穂を降らせるだけのシンプルなものを考えていましたが、いろいろ追加しているうちに、桜や紅葉、雪だけでなく、スズメやカラスなど飛び回るようになりました。
カラスがかかしに近づくと驚いて逃げたり、かかしを長押しすると稲穂が飛び出したりと、少し変わった仕掛けも入れています。
アニメションの種類や数、動く速さなどは調整パネルから変更できるので、好みに合わせて自由に設計してみてください。
今回は、基本的な使い方と設定方法を紹介します。
１．どんな機能がある？
Kakashi Seasonal Effectsには、現在16種類のアニメションを用意しています。大きく分けると、季節の植物、天気、鳥や昆虫のアニメーションです。
また、画面右下には、ページの先頭へ戻るためのかかしボタンを設置しています。
主な機能は次のとおりです。
- 桜、紅葉、雪など16種類のアニメーション
- 複数のアニメーションを組み合わせて表示
- 数、大きさ、速さ、揺れ幅など調整
- 種類ごとの個別設定
- カラス、カカサギとかかしのインタラクション
- 日本語・中国語の切り替え
- 設定の保存、初期化、書き出し
- スマートフォン対応
アニメーションはCanvas上に描画しているため、通常の文章選択やリンクのクリックを邪魔しないようにしています。
２．初期設定について
初期状態では、カカサギと紅葉のアニメーションだけを表示する設定にしています。
詳細は次のとおりです。
| 項目 | 初期値 |
|---|---|
| アニメーション | ON |
| 表示する種類 | カカサギ、紅葉 |
| カカサギの数 | 約１羽 |
| 紅葉の数 | ８ |
| 速さ | 0.7倍、１倍 |
| 最小サイズ | 40 |
| 最大サイズ | 90 |
| 揺れ幅 | 1倍 |
| 回転 | 1倍 |
| パネルの初期言語 | 日本語 |
紅葉の数は、基準となる画面サイズでの目安です。スマートフォンなどでは、画面サイズに応じて数や大きさを調整しています。
また、一度設定を保存した場合は、初期設定よりも保存済みの設定が優先されます。
３．調整パネルの開き方
アニメーションの設定は、画面右下にあるかかしボタンから変更できます。
パソコンとスマートフォンで操作方法が少し異なります。
パソコンの場合
ページを下にスクロールすると、右下にかかしが表示されます。
かかしにマウスカーソルを合わせ、そのまま約1.2秒待つと、稲穂が飛び出して調整パネルが開きます。
普通にクリックした場合は、ページの先頭へ戻ります。
【画像②：かかしボタンと調整パネルの表示】
スマートフォンの場合
スマートフォンでは、かかしを約1.2秒長押しすると調整パネルが開きます。
パネルは画面下部から表示されるので、各項目をスクロールしながら調整できます。
通常のタップでは、パソコンと同じようにページの先頭へ戻ります。
なお、調整パネルを無効にしている場合は、長押ししても開きません。
４．アニメーションの種類
現在用意しているアニメーションは全部で１８種類です。
4.1 鳥・昆虫
| 種類 | 動き・特徴 |
|---|---|
| カラス | 羽ばたきと滑空を繰り返しながら飛行 |
| スズメ | 画面の左右を飛び回る |
| ツバメ | 旋回しながらすばやく飛ぶ |
| カササギ | かかしの上にとまったり、地面で跳ねたりする |
| 赤トンボ | 空中で停止したり、急に移動したりする |
| ホタル | ゆっくり飛び回りながら点滅する |
個人的に一番気に入っているのは、やはり鳥系の動きです。
カラスはまだ飛んでいるだけではなく、かかしとの距離によって動きが変わるようにしています。かかしに近づくと、驚いて急上昇しながら逃げ、その際に羽根を一本落とします。
ツバメは、まっすぐ飛ぶというより、少し大きめの円を描くように旋回しながら飛ぶ動きにしています。スピード感があるので、画面に入ると雰囲気が少し軽やかになります。
カササギは、飛ぶだけでなく、かかしの上にとまったり、地面でぴょんぴょん跳ねたりするようにしています。ほかの鳥とは違って、少し生活感のある動きを入れているのが特徴です。
4.2 花・植物・落ち葉
| 種類 | 動き・特徴 |
|---|---|
| 稲穂 | ゆっくり揺れながら落下 |
| 桜 | 左右に揺れ、回転しながら舞い落ちる |
| 落ち葉（紅葉） | 空中で回転しながら落下 |
| イチョウ | 黄色い葉がゆっくり舞い落ちる |
| 小花 | 色とりどりの小さな花が落下 |
| ススキ | 秋の野原をイメージした落下演出 |
| タンポポ | 綿毛がゆっくり漂い、ときどき上昇 |
| 猫じゃらし | 左右に揺れながら落下 |
| 柿の葉 | オレンジ色の葉が回転しながら落下 |
桜や落ち葉、イチョウなどは、それぞれ色や落下速度を調整しています。
同じ落下アニメーションでも、種類によって動きが異なるので、組み合わせるとまた違った雰囲気になります。
4.3 天気・その他
| 種類 | 動き・特徴 |
|---|---|
| 雪 | 小さな雪がゆっくり舞い落ちる |
| 雨 | 細い雨粒が斜め下に落下 |
| 羽根 | カラスの羽根が左右に揺れながら落下 |
雪は少しゆっくり、雨は速めに動くようにしています。
羽根はカラスが驚いて落とす演出とは別に、通常のアニメーションとして選択することもできます。
５. 種類ごとに個別設定する
複数のアニメーションを組み合わせるときは、「調整対象」から個別に設定できます。
例えば、落ち葉とカササギを同時に表示している場合、落ち葉だけを増やし、カササギの数はそのままにすることができます。
「共通」を選択すると、個別設定されていない項目に共通の値が適用されます。
特定の種類を選択すると、その種類だけに設定を適用できます。
個別設定した項目には小さな丸印が付きます。
一度個別設定した項目は、共通設定を変更しても影響を受けません。
共通設定に戻したい場合は、「共通設定に戻す」を押してください。
6. 設定を保存する
気に入った組み合わせができたら、調整パネル下部の「保存」を押してください。設定は現在使用しているブラウザに保存され、次回同じサイトを開いたときにも引き継がれます。
ただし、設定はブラウザ単位で保存されるため、ほかの端末やブラウザは自動的に同期されません。
また、ブラウザの保存データを削除した場合や、サイト側で設定のバージョンが更新された場合は、初期設定に戻ることがあります。
| ボタン | 機能 |
|---|---|
| 保存 | 現在の設定をブラウザに保存 |
| 停止 | アニメーションを一時停止 |
| 再開 | 停止したアニメーションを再開 |
| 書き出し | 現在の設定をコード形式で表示 |
| 初期化 | 保存済みの設定を削除し、初期状態に戻す |
「書き出し」は、設定内容をコピーして保管したい場合などに利用できます。
７. おすすめの組み合わせ
最後に、個人的に試してみたい組み合わせをいくつか紹介します。
| テーマ | 組み合わせ |
|---|---|
| 春 | 桜＋スズメ＋ツバメ |
| 夏 | ホタル＋タンポポ＋ツバメ |
| 秋 | 落ち葉＋イチョウ＋赤トンボ＋カササギ |
| 冬 | 雪＋羽根 |
| 田園風景 | 稲穂＋ススキ＋カラス＋カササギ |
| 雨の日 | 雨＋カラス＋ツバメ |
特に秋の組み合わせは、稲穂や落ち葉など、かかしのイメージともよく合うと思います。
表示数を増やしすぎると文章が読みにくくなる場合もあるので、ブログを読むときは少し控えめに設定するのもよさそうです。