【Studio】ホバーで画像が切り替わるアニメーションを解説！

ホバーで画像が切り替わるアニメーションは、複雑で難しいと思われがちです。

ですが断言します！初心者でも簡単に実装できます！

そこで今回は、ホバーで画像が切り替わるアニメーションを合計10枚の画像を使いながら説明していきます。

完成イメージは下記のとおりです。

5分ほどで実装できる内容になっているので、ぜひこの機会に実装していってください！

ホバーで画像が切り替わる仕組みについて

ホバーで画像が切り替わる仕組みは、下記のとおりです。

ホバーされていない時は、画像1と画像2が重なっています。ですがホバーされた時に画像2が透明になり、下にいる画像1が浮き出てくるようなイメージです。

構造はシンプルなので、初心者でも問題なく実装できる内容となっています。

ホバーすると画像が切り替わるアニメーションの作成方法

ホバーすると画像が切り替わるアニメーションは、下記の手順で作れます。

合計10枚の画像を使いながら、具体的に説明していきます！

新エディタ実装方法

①：画像2枚を重ねて配置する

左メニュー欄の「追加パネル」ボタンをクリックします。

「基本」→「Box」をクリックして、ボックスを追加します。

配置したボックスの中に、1枚目の画像を入れます。

2枚目の画像を、1枚目の画像上にドラッグ&ドロップします。

2枚目の画像を選択した状態で、右パネルを開き、「ボックス」→「絶対位置」に変更します。

2枚目の画像を選択した状態で、下記のように設定します。

これで2枚の画像を重ねて配置することができました！

②：条件付きスタイルを「ホバー」に変更する

次は、条件付きスタイルを「ホバー」に変更していきます。

2枚目の画像を選択します。

2枚目の画像を選択したまま、「条件付きスタイル」→「ホバー」に変更します。

③：ホバーした時のモーションを設定する

次は、ホバーした時のモーションを設定していきます。

右パネル内の「外観」と「アニメーション」を編集します。

モーションを以下のように設定します。

項目	設定値	どのような挙動
不透明度	0	ホバーすると2枚目の画像が、完全に透明になる
時間	1.4	ホバーして1.4秒後に、2枚目の画像が完全に透明になる
遅延	0.3	ホバーしてから0.3秒後に、アニメーションが開始される

これでホバー時のモーション設定は完了です！

実際にライブプレビューで確認してみましょう！

旧エディタ実装方法

①：画像2枚を重ねて配置する

左メニュー欄の「右矢印」ボタンをクリックします。

「追加」→「ボックス」→「Box」をクリックして、ボックスを追加します。

配置したボックスの中に、1枚目の画像を入れます。

2枚目の画像を、1枚目の画像上にドラッグ&ドロップします。

2枚目の画像を選択した状態で、エディタ左上にある「配置」→「絶対位置」に変更します。

2枚目の画像を選択した状態で、下記のように設定します。

これで2枚の画像を重ねて配置することができました！

②：条件付きスタイルを「ホバー」に変更する

次は、条件付きスタイルを「ホバー」に変更していきます。

2枚目の画像を選択します。

2枚目の画像を選択したまま、条件付きスタイルを「ホバー」に変更します。

③：ホバーした時のモーションを設定する

次は、ホバーした時のモーションを設定していきます。

上部メニューの「モーション」をクリックします。

モーションを以下のように設定します。

項目	設定値	どのような挙動
不透明度	0	ホバーすると2枚目の画像が、完全に透明になる
時間	1400	ホバーして1.4秒後に、2枚目の画像が完全に透明になる
遅延	300	ホバーしてから0.3秒後に、アニメーションが開始される

これでホバー時のモーション設定は完了です！

実際にライブプレビューで確認してみましょう！

Studioのサイト制作は「Terace」にお任せ！