「表示したときにアニメーションする」を考える

構想の話。

どういうことか

WEBページを読み込んだときとか、スクロールしたときに要素がフェードインしたり所定位置に収まったりとかするやつ、たまにある。それをやるにはどうしたらいいかとか、懸念点は何だとか、そういう感じの話。

構造の解釈

ネックはjs。

ページ上の各要素はページのどこに配置しているか、ページ左上を(0,0)として縦横の値を取得できる。ついでに、現在表示している位置も取得できる。だから、指定の要素が表示されてるかどうかってのが分かる。それが発火のトリガーになる。

で、発火したらどうするか。

発火前の状態と、発火時の状態をそれぞれ設定して、cssでやるならtransitionとか、内容によってはjsで、それぞれを繋いでアニメーションさせる。

要素が縦並びならそれで済む。

要素が横並びだとスクロールしたら同時に複数の要素が発火するわけだけど、ひとまとめじゃなくて順番に表示したいとかそういうのも出てくる。そうすると各々にそれぞれの発火タイミングを作ったり、アニメーションを変えたりしてずらしていくことになる。

更に気にしていく事がある。

ページの最上部から下にスクロールするのが一般的な動作だけど、アンカーを打ってページ中腹からスタートする場合もある。その場合、上にある要素はどうなんの?っていう。まあ、表示エリアに要素が入ったかどうかをclassを付けて判断するとかできるんだけど。横の動きならいいけど縦の動きなら変な感じにならないか?って懸念がある。

他にも一旦表示したやつを再度表示したらどうなるのっていう。ブラウザ上から消えたときにリセットされて、表示するたびに発火するタイプの効果をつけているやつもある。正直、いっぺん見たらお腹いっぱいなので何度もやられるのはしんどい。毎度表示を待つのはめんどくさい。

それもあって、アニメーションに掛かる時間も気になる。1秒超えのアニメーションとか閲覧のペースを乱されるんでストレスがすごい。

発火とアニメーション自体はそんなに難しくないけど、導入にあたってどんな感じのやつがいいのかっていう判断が必要になる。

自作するときの意識

アニメーションはcssに一任して、それの発火ポイントをjsで制御するのがいいよね。多分それがシンプルで楽。

発火したら再発火させない。一度表示したもの、動いたものはそれでお終い。絶対その方がいい。常に動いて嬉しいねって閲覧者はレアなんじゃないかな。情報が欲しいんであって動きを見に来てるわけじゃないもんね。

自作するときの注意

アニメーションさせるにあたり、非表示→表示の効果を作るのが一般的でしょうね。

だからって本当に要素をなくすとページの高さが変わって、デザインとか諸々がガチャガチャするんで、opacityの変更でやっていくのが無難。数値指定できるからcss上でアニメーションを組める。

displayは論外、visibilityも違う。opacity。

更に、要素の位置を動かすことになるんだけど本当に動いちゃうと他の部分に差し障りが出るので、topとかbottomとかのアレで動かす。

div{
    position: relative;
    top: 100px;
}

そうすれば、領域自体はそのままで表示内容の位置だけが動く。

基本的にこれを付与してアレコレすれば済むきもするんだけど、なんか怖いんで、ラッピングしてもいいかもしんない。

って感じの。

コメント

タイトルとURLをコピーしました