STUDIOでおしゃれな画像アニメーションを作る方法

こんにちは、キクチウェブのキクチです。

STUDIOは直感的にサイト構築ができ、シンプルなアニメーションをつけることも簡単にできます。少し工夫するだけでシンプルなアニメーションでもオシャレな印象に仕上げることが可能です。

今回は画像アニメーションにひと工夫していきたいと思います。

まずは、こちらをご覧ください。

この画像アニメーションは色々な場面で使用が可能な汎用的なアニメーションだと思うのでぜひ習得してガンガン使っていきましょう！STUDIOでのサイト制作の幅が広がること間違いなしです！

手順

任意の画像を並べる

まずは土台となるセクションを用意します。

画面一番左のメニューバーの一番上が「セクション」になっています。私はこの「セクション」の「横幅」を「1280px」に設定しました。お好みのサイズに設定してください。

そこに画像を配置していきます。横に3つ画像を並べてみました。横幅には「flex」を使用しており、左から「1 : 2 : 1」 を設定しました。

画像はお好きなものを使ってください。

このような状態になっていればOKです。

画像の上にボックスを被せる

先ほど設定した各画像の上にボックス重ねていきます。

このようにできましたら、画像全体を覆うようにしたいので、縦横ともにサイズを100%に設定します。

3つとも設定するとこんな感じになります。レイヤー階層はこんな具合です。

これで下準備は整いました。いよいよアニメーションへと移っていきます。

画像のアニメーションを設定する

要素が重なって選択しづらい時があるので、その時はレイヤーから選択して下さい。

では、レイヤーから画像を選択して、「モーション」の「原点」を選択します。左から出てくるような画像であれば「原点」は「真ん中の左」に、上からであれば「真ん中の上」にと各画像の原点を変更していきます。

次に、画像を選択した状態で画面、右上の条件付きスタイルの出現時を選択

続いて、下記ピンク色になっている部分を変更していく。「時間」と「遅延」に関してはご自身でお好みの値に設定して下さい。

ここでのポイントは「スケール」で横方向からのアニメーションの場合は「X」を「0」に設定して、縦方向の場合は「Y」を「0」に設定します。

これで画像の方の設定は完了です。さぁ次がラストです。画像の上に重なったボックスのアニメーションを設定していきましょう。

画像の上のボックスのアニメーションを設定する

これは先ほどの画像のアニメーションと重複する点が多いです。

まずは、画像と同様に「モーション」→「原点」

左から出てくるのであれば「真ん中の左」、上からなら「真ん中の上」。先ほどの画像の場合と同様ですね。

そして、「スケール」を変更します。横方向なら「X」を「0」に、縦方向なら「Y」を「0」に。こちらも画像の場合と同様ですね。

ただここで注意がございまして、上記「スケール」は「条件付きスタイル」→「出現時」を設定していない状態で「スケール」を変更している点に注意が必要です。

いよいよ、最後です。

画面右上の「条件付きスタイル」→「出現時」をクリックして、

先ほど「0」に設定した「スケール」を「1」に戻します。「時間」と「遅延」はお好みで設定なんですが、画像が出現してからアニメーションを動かしたいので、遅延を長めにとって適宜調整して下さい。

まとめ

いかがでしたでしょうか？

私の説明が下手でなければ、最初にご覧いただいたアニメーションが実現できたかと思います。あまりうるさいアニメーションではないので、要所要所で使用でき、重宝するかな？と思っています。

STUDIOを触り出して、まだ間もないですがたくさん使って、もっと有益な情報を発信できるように頑張ります。

以上、キクチウェブのキクチでした。ではでは。