まずホームページを「動かす」とは何でしょう。運用することも「動かす」、サーバーを移管することも「動かす」。ホームページにおいて動かすの概念は多々ありますが、今回はそういった話でなく「オブジェクトを動かすホームページ」について少し話していこうと思います。
動きについて
ここで言うホームページの動きは結構様々です。
マウスカーソルのホバーをトリガーにしたり、スクロールで画面に映ることをトリガーにしたり、ページを切り替えることをトリガーにしたり、時間をトリガーにしたり。どんな動きをさせるにしろ、基本的には「トリガー」となるきっかけが必要です。
そして肝心の動き方ですが、色を変える・画像を変えるなどの簡単で軽微な動きから、オブジェクトを滑らかに出現させたり、背景を目まぐるしく変化させたり、思いつく限りの様々な動作を実装することができます。動きやトリガーが複雑になればなるほど構築も一筋縄では行かなくなり、プロでも実装することが難しい動きも多々存在するので一概に「なんでもできます！」と言い切ることはできません。ですが自由度は依然高いので、動かすことで得られる様々な恩恵に期待することができます。
動かすことによる効果
いくつか例を挙げて見ていきます。
ホバーエフェクト
ホバーは動きのトリガーとなる動作です。指定したオブジェクトにマウスカーソルを重ねると色を変えたり、隠していたオブジェクトを出現させたりすることができます。
ホバーエフェクトによる効果は、
・クリックできるボタンであることをアピールすることができる
・数々並んでいるボタンの中で、カーソルを置いたボタンを強調することができる
・アコーディオンメニューに活用することで、クリックなどのユーザーの動作を最小限に目当てのページに誘導することができる
など基礎的な動きとあって得られる恩恵も多いです。実装はかなり簡単なので古いWebサイトでも使われているのをよく目にします。
ただ、ホバーエフェクトをかけただけでは切り替わる瞬間は一瞬です。カーソルを乗せた瞬間に変わるスタイル。
そういう時に活用するのが以下。
トランジション（transition）
トランジションというのはCSSのコマンドの一つです。単体では動きにならず、ほかのトリガーと動きと組み合わせることで有効になります。
機能としては、「指定した長さでゆっくり動かす」こと。前述したホバーエフェクトをかけた要素にこのトランジションをかけると、カーソルを乗せたら指定した秒数かけて徐々に動かすみたいな動きが実装可能になります。
このトランジションはホバーだけでなく様々なエフェクトに対応するため、ホームページを動かす際には絶対に欠かすことのできない機能の一つです。
ほかにもメインビジュアルのスライドや、スクロールにあわせてオブジェクトをフェードインさせたり、動かし方にはいろいろな選択肢があります。実装が簡単なものから困難なものまで色々なので、またいつか改めてご紹介したいと思います。
