アニメーションを用いるときに、一番肝心なことは、トリガーである。思い通りにアニメーションを発火させるにはどういう仕組みを作ったら良いのか。この辺りを考えてみよう。例えばトリガーには以下のようなものがある。

まず、一つ目。トリガーの仕掛けで手軽なのはオンマウス(hover)である。また同様に、過去にはこんなアニメーションも作った。オンマウス(hover)を使ったものはかなり古くから存在し、CSSで動きをスムーズにしたもの(アニメーション)が現代版である。モバイルではタップするとアニメーションが走る。

次、二つ目。クリックしてアコーディオンを展開するもの。これはこれで非常に使い道が多く、スムーズなアニメーションの動きが今では当たり前になってきている。

次、三つ目。スクロールするとアニメーションが起動するタイプ。スクロールの上下に因り全てのアニメーションの仕掛けが何度も起動を繰り返すこの三つ目が、このページの本題である。

トリガーの仕組みを知ることで、アニメーションをより手軽に演出できる方向へ進めていくことが狙いである。

現在において未解決なのが、一部のアニメーションが起動しないことである。今回はこの問題を完全解決してみたいと思う。

スクロールアニメーションを実装できる「AOS」プラグインを使って検証する。

複数の用途のトリガーが用意されており、それを組み合わせれば上手くいきそうな展望がある。また、トリガーの利用方法さえ分かれば、カスタムのアニメーションも組めそうだ。

「AOS」は「カスタムデータ属性(data-*)」を使って多くのスタイルや複数のトリガーを設定できるものだ。

「AOS」を設定する仕方で、トップからまたはボトムからスクロールしていってアニメーションをその都度起動したい。この場合、どういうトリガーを使うと上手くいくのだろう。

また、アニメーションの起動はレスポンシブ・レイアウトでの不具合が確認されている場合が多い。

全体に複数のアニメーションを配置して、その動作確認をしなければならない。

例えばこのページを全画面で表示させるだけでも挙動が異なる。この原因は何なのか、多方面からチェックをして使い方を考える必要がある。

・・・・・・・・・・

Jeff Beck─「おーい、そろそろ始めるぞ。他に誰がいる(Who eles)?」

Cozy Powell─「ジミーがいるよ。さっき、俺も加えろって言ってその辺ウロチョロしてたぜ。」

Ron Wood─「へぇ、ジミヘンが一緒に演りたいって?」

Cozy Powell─「何言ってんだよ、幼馴染のペイジだよ。」

Ron Wood─「ああ、ジミーね。」

検証の結果を述べていこう。「AOS」の検証で最初に作ったのは1カラムの段落にイメージとテキストを配置してアニメーションを設置したものだ。このページでは(1)と(33)の段落がアニメーションしない。この対策は後述する。

2カラムの段落では、その段落をごっそりひと塊にしていくつかのアニメーションの対象に設定してみて様子をみる。

結果、段落のボリュームの加減やその配置場所によっては不具合が発生するようだ。不具合はアニメーションの対象が高いとか二段に跨るときに発生し、レイアウトがカラム落ちして崩れる。2カラムでは相性が悪いようだ。

次、レスポンシブでの検証が気になる。各々のサイズで検証をしていくと、問題はタブレットのPortrait (縦)の場合に顕著に露出した。段落の先頭部分と末尾部分のアニメーションが動いていない。モバイルのPortrait (縦)でも多少問題ありだ。共通することは、Portrait (縦)である。

さて、ある解決策を講じると、全ての問題がクリアになった。

「天と地」の部分に各々「高さ100vh以上」のイメージや大きな空白を設置した。次に「data-aos-anchor」や「data-aos-offset」や「data-aos-anchor-placement」などトグルを付けていった。トグルの設定を無視しても発火はするようだ。「高さ100vh以上」だけで解決できた。スタイルの種類は多いので、どういう具合に動くかの検証には時間をかけてほしい。

「天と地」はスクロール領域を確保するためであり、このスクロールの「あそび」が無いと、天に近いまたは地に近いアニメーションは発火できないということが判明した。

slick.jsを使ったページでは2ページ目からはAOSが動作しない。そこで、CSSのみでスワイプする複数のスライドを使って、より実践的にAOSとアニメーションを絡めた検証をしてみた。