こんにちは、皆さん。今日は、当サイトの「アニメーション物語」について、綴ってみようと思います。
昨今の HTML、CSS の進化は、本当に凄いですね。昔は、デスクトップといえば、スタンドアロンで、難しいことは「ローカル環境一択」だったのですが、
今時は、何でも「インターネット環境」がないと、話になりません（笑）。
そんな中で、ウェブブラウザの進化が、飛躍的に良くなっています。そして、HTML、CSS でアニメーションを表現できるのは、非常に良いですね。
「静的」な世界に「動的」な世界を、取り入れることができます。
特に、HTML と CSS だけでも、色んなことができるので、初心者の方でも飛躍的にホームページを、多彩に表現できるようになりました。
勿論、JavaScript を使えば、更に凄いことが出来るというのは、言うまでもありません。
尚、当サイトでは、アニメーションに JavaScript は使っていません。HTML とCSS だけです。しかし、それだけでも、発想次第では凄いことができると思います。
或いは逆に、一寸した「アニメーション」を使うことによって、強調や華やかさを増すことができるので、ＵＩ（ユーザーインターフェース）が、格段に良くなることがあります。
最初はヘッダーで、動かそうと思っていました。
当サイトを作成するにあたっては、当初から「ヘッダー部分」で、アニメーションを使って「花輪」を、動かそうと思っていました。
というのは、一番インパクトがありますからね。そして、アニメーションの方法は、以前から分かっていたので、気楽に考えていました。
ですから、最後の辺りで実装しようと思っていました。
というのは、「Cocoon」の仕様が、全く分からない状態だったので、先ずは「Cocoon」の仕様に慣れることが重要でした。
別のサイトでも、ワードプレスで構築しているので、ある程度は分かっていた積もりだったのですが、それでもテーマが異なると、中々難しいですね。
そして、そうこうしている内に、一応トップ画面も出来上がったので、そろそろヘッダー部分にアニメーションを、追加しようと思って取り掛かりました。
ところが、色々とやればやる程、ヘッダーでは無理だということが、分かりました。
ヘッダーでの試行錯誤の経過。
何故、ヘッダー部分で、アニメーションを諦めたのかを、その経過を記述します。
尚、「ヘッダー」とか「ボディ」というのは、HTML の「<header></header>や<body></body>」ではなく、[Cocoon の class」の総称です。
例えば、「ヘッダー」というのは、「.header-xxxxx」とかです。「ボディ」というのは、「記事（固定ページを含む）」のことです。
- ヘッダー部分に「画像」を追加する方法が分かりません。
ヘッダー部分に対して「CSS」を追加することは、「外観」－「カスタマイズ」－「追加 CSS」から出来るのですが、「HTML」に画像を追加して、その画像に「class」を設定することが出来ません。
これが出来ないと、アニメーションとして、個別に色んなことが出来ないので、困りました。 - 画像を動かすだけなら、「background-image:」で動かせます。
「CSS」だけで、アニメーションを「移動」するだけなら、「background-image:」で、幾らでも（記述の許す限り、無制限に）動かせます。
例えば、「background-position:」を、アニメーションで変更していきます。
しかし、その画像に「回転」が加わると、「そうは問屋が卸さない」のですね（笑）。
というのは、回転を行うには、CSS の「transform:」のプロパティが、必要になります。ところが、このプロパティは、複数の画像には対応していません（合ってる？）。
私が知らないだけで、複数の画像に対応していれば、CSS だけで「回転」は、無制限に行えます。これが出来れば、一番良いですね（笑）。
例えば、「background-transform:」のようなプロパティが、存在すれば良いのですが、私の調べた範囲では、有りませんでした（分かりませんでした）。
ですから、CSS の「background-image:」だけでは、私の知る限りでは、「個別」の回転は行えません。 - 唯一の方法は、「xxxxx::before」か「xxxxx::after」を使う方法です。
この場合は、個別に「background-image:」を設定できるので、その中で回転用のアニメーションを、一つ定義することができます。
しかし、数が限定されるので、「回転」には向かないと思います。但し、「移動」だけなら、無制限に「画像」を指定することが出来ます。 - それでも一応は、その方法で「花輪」を回転させて、動かせたんです。
ところがですね、「追従ヘッダー」を使っている場合は、その中に「花輪」が表示されてしまうんですね（激汗）。これは、流石にダメですよね。
そこで、色々と「追従ヘッダー」に関する CSS を、試行錯誤してみたのですが、「花輪」を非表示にすることが出来ませんでした。できるかも知れませんが、分かりませんでした。
ですから、究極の判断として、「追従ヘッダー」を使用しなければ、良い分けです（汗）。
ところがどっこい、そう簡単ではないんですね。「.header-xxxxx」には、複雑な因果関係が含まれているので、全てが円満になるということは、中々ないんです。 - ですから、「.header-xxxxx」での「回転」は、諦めました。
そもそも、「.header-xxxxx」というのは、最もインパクトがある反面、最も複雑な構成になっている筈です。
その狭い中で、アニメーションを行うこと自体が、私には無理だったんですね。
ですから、もっと広々とした「ボディ（記事）」で、行うことにしました。それが、現在のアニメーションの方法です。 - 「記事（固定ページを含む）」の中で、アニメーションを行います。
これが、本来のアニメーションの姿だと思います。自由に、何でも出来ます。
記述の許す限り、無限大に。但し、「CPU パワー」も使いますので、適切にどうぞ。
当サイトは、解説サイトではないので、方法論は記述しませんが、「HTML、CSS の基礎」を、ウェブ検索や書籍でしっかりと習得して、試行錯誤を繰り返して行えば、
そう遠くない未来に出来ると思います。HTML や CSS というのは、説明と共に実際に体験してみるのが、一番理解しやすいと思います。
しかも、「テキストファイル（.html と .css）」と「ブラウザ」だけで、アニメーションは動きますし、テスト・検証も行えるので、頑張りましょう。 - 最近は、CSS で「if 文」が使えるようです。
そうですね、「if 文」が使えると、飛躍的に色んなことが出来ますね。
例えば、簡単なゲームのようなことも、CSS だけで出来るかも知れません。想像だけですが。
アニメーションの精度について。
本当に、驚いたのですが、ブラウザーのアニメーションの精度は、非常に良いですね。
私は、「Ｃ＃」のサンデープログラマーなので、「Ｃ＃」との違いが分かるのですが、このアニメーションの動きは、非常に「精細でスムーズ」です。
「Ｃ＃」で、これだけ「精彩」に画像を動かすのは、結構難しいですね。「流石」というしかありません。
ただし、「Ｃ＃」の場合は、基本的に「graphics オブジェクト」を扱うので、その量と速度と計算量は、大変素晴らしいものがあります。
ですから、まぁ「比較」するものではありませんが、「ふと」そう思いました。
最後に、雪を降らせましょう。
それでは、最後に、簡単な「雪」を降らせてみましょう。「雪」の画像は、余り上手く出来なかったのですが、まぁそれなりに「雪」に見えると思います（笑）。
このアニメーションは、トップページと同じように、
「このページが最初に表示されたり、更新されたりした時点から、各要素が「一往復」だけ、アニメーションとして実行されます。」
ですから、ここに辿り着くまでに、一度実行されているので、再生するには「この位置」で、ブラウザの「更新（上部にある円形の矢印）」をクリック（又は、Ctrl + R）してください。
まとめ。
如何でしたでしょうか。アニメーション自体は、拙作で簡単なものだったのですが、それでも物語はあるものです(笑)。
アニメーション自体を動かすのは、複数のプロパティの組み合わせなんですが、重要なのは、発想だと思います。「何を表現したいのか？」というような。
出来るか出来ないかではなく、「自分がやりたい夢」が重要ですね（ Good ）。
私もまだまだ、知らないことの方が、遥かに多いのですが、頑張りましょう。(^^)/
それでは、この辺でごきげんよう。
