ホバーを使ったStudioアニメーションの実装方法

こんにちは、STUDIOのRyoです。

STUDIOで実装するアニメーションは、機能の組み合わせや設定の工夫次第で、様々な表現ができます。

この記事では、STUDIO公式LPの一部で使用されているホバーアニメーションと、ホバーで画像を切り替える表現の実装手順をご紹介します。

この内容を応用し、様々なSTUDIOの表現に挑戦してみてください！

本記事は、STUDIOの基本操作やアニメーションの設定方法を理解している方向けの内容となります。アニメーションの基本を学びたい方は、まずはブログ記事をご参照ください。

ホバーで動画自動再生風のアニメーション

サンプル紹介

画像にマウスカーソルを当てると、動画が動き出すようなアニメーションです。

こちらのホバーアニメーションは、実際にホバーをトリガーとして動画が再生されているわけではありません。

動き続けているGIF画像の上に静止画像を重ね、ホバー時にその静止画像を非表示することで、GIF画像が表示されます。

つまり、「ホバーによって動き出しているように見える」という仕組みになっています。

このアニメーションの再現に必要なものは以下の二つです。

• GIF画像

• 静止画像（GIFの一部シーンを切り取ったもの）

用意した素材は、事前にエディタにアップロードしておきましょう。

素材が準備できたら、設定を行っていきましょう！

実装手順

1. GIF画像と静止画像を配置

エディタの追加パネルから親ボックスとなるボックスを配置します。

GIF画像を、親ボックス内にImgモード※で配置します。このとき、最初に配置した親ボックスの縦横幅はautoに設定します。
※Imgモードにすることで、レスポンシブ時に画像の縦横比を保つことができます。

Boxモード・Imgモード | STUDIO U

親ボックス内に、静止画像を配置します。

静止画像はGIF画像の上に重ねるため、エディタ左上にある「配置」を「絶対位置」へ変更します。 次に、静止画像を選択したまま縦幅・横幅を100%、重ね順を１に設定します。

2. 条件付きスタイル（ホバー）を設定する

配置した静止画像のボックスを選択し、エディタ右上にある「条件付きスタイル」から「ホバー」を選択します。

ホバーが選択された状態でモーションタブを開き、不透明度を0に設定します。

以上で、設定は完了です。

ライブプレビューで確認する

ここまで設定ができたら、ライブプレビューで確認しましょう。
実際の動きを確認しつつ、時間・遅延など、好みに合わせて各項目の数値を調整しましょう。

注意：
モバイル端末の場合、使用端末やブラウザによって、タップ時の反応が異なります。閲覧環境による動作の異なりを避けるため、スマートフォン閲覧時はGIF画像を常時表示するようデザインを調整するか、モーダルでの対処をご検討ください。

ホバーで画像が切り替わるアニメーション

画像を２枚重ね、ホバーをすると上の画像が消え、下に隠れていた画像が現れるアニメーションの設定手順をご紹介します。

サンプル紹介

実装手順

1. 画像を2枚重ねて配置する

親ボックスを配置します。

１枚目の画像（ホバー時に表示させたいもの）をImgモードで親ボックス内に配置します。

２枚目の画像を、エディタ左上にある「配置」から「絶対位置」にし、縦幅・横幅を100%、重ね順を1 に設定し、１枚目の画像に重ねます。

2. 条件付きスタイル（ホバー）を設定する

2枚目に設置した画像を選択し、エディタ右上にある「条件付きスタイル」から「ホバー」を選択します。

今回は、ぱっと切り替えずに緩やかに画像を透明にしたいので、以下のように設定します。

以上で、設定は完了です。

3. ライブプレビューで確認する

設定ができたら、ライブプレビューで確認をしましょう。

時間・遅延の数値を調整したり、イージングを調整して動きのパターンを変えてみるなど、設定を工夫してお好みの表現を見つけてみてください！

最後に

いかがでしたか？

今回は、ホバーで動画自動再生風のアニメーションと、ホバーで画像が切り替わるアニメーションの実装手順をご紹介しました。

一見、どちらも複雑な設定が必要に思えるアニメーションですが、発想や機能の応用次第で、簡単に実現することができます。

この記事を参考に、実際に同じものを作ってみたり、アニメーション設定を変えて自身のサイトへ転用するなど、STUDIOアニメーションを使った様々な表現を楽しんでください！