こんにちは、キクチウェブのキクチです。
STUDIOは直感的にサイト構築ができ、シンプルなアニメーションをつけることも簡単にできます。少し工夫するだけでシンプルなアニメーションでもオシャレな印象に仕上げることが可能です。
今回は画像アニメーションにひと工夫していきたいと思います。
まずは、こちらをご覧ください。
この画像アニメーションは色々な場面で使用が可能な汎用的なアニメーションだと思うのでぜひ習得してガンガン使っていきましょう！STUDIOでのサイト制作の幅が広がること間違いなしです！
手順
任意の画像を並べる
まずは土台となるセクションを用意します。
画面一番左のメニューバーの一番上が「セクション」になっています。私はこの「セクション」の「横幅」を「1280px」に設定しました。お好みのサイズに設定してください。
そこに画像を配置していきます。横に3つ画像を並べてみました。横幅には「flex」を使用しており、左から「1 : 2 : 1」 を設定しました。
画像はお好きなものを使ってください。
このような状態になっていればOKです。
画像の上にボックスを被せる
先ほど設定した各画像の上にボックス重ねていきます。
このようにできましたら、画像全体を覆うようにしたいので、縦横ともにサイズを100%に設定します。
3つとも設定するとこんな感じになります。レイヤー階層はこんな具合です。
これで下準備は整いました。いよいよアニメーションへと移っていきます。
画像のアニメーションを設定する
要素が重なって選択しづらい時があるので、その時はレイヤーから選択して下さい。
では、レイヤーから画像を選択して、「モーション」の「原点」を選択します。左から出てくるような画像であれば「原点」は「真ん中の左」に、上からであれば「真ん中の上」にと各画像の原点を変更していきます。
次に、画像を選択した状態で画面、右上の条件付きスタイルの出現時を選択
続いて、下記ピンク色になっている部分を変更していく。「時間」と「遅延」に関してはご自身でお好みの値に設定して下さい。
ここでのポイントは「スケール」で横方向からのアニメーションの場合は「X」を「0」に設定して、縦方向の場合は「Y」を「0」に設定します。
これで画像の方の設定は完了です。さぁ次がラストです。画像の上に重なったボックスのアニメーションを設定していきましょう。
画像の上のボックスのアニメーションを設定する
これは先ほどの画像のアニメーションと重複する点が多いです。
まずは、画像と同様に「モーション」→「原点」
左から出てくるのであれば「真ん中の左」、上からなら「真ん中の上」。先ほどの画像の場合と同様ですね。
そして、「スケール」を変更します。横方向なら「X」を「0」に、縦方向なら「Y」を「0」に。こちらも画像の場合と同様ですね。
ただここで注意がございまして、上記「スケール」は「条件付きスタイル」→「出現時」を設定していない状態で「スケール」を変更している点に注意が必要です。
いよいよ、最後です。
画面右上の「条件付きスタイル」→「出現時」をクリックして、
先ほど「0」に設定した「スケール」を「1」に戻します。「時間」と「遅延」はお好みで設定なんですが、画像が出現してからアニメーションを動かしたいので、遅延を長めにとって適宜調整して下さい。
まとめ
いかがでしたでしょうか？
私の説明が下手でなければ、最初にご覧いただいたアニメーションが実現できたかと思います。あまりうるさいアニメーションではないので、要所要所で使用でき、重宝するかな？と思っています。
STUDIOを触り出して、まだ間もないですがたくさん使って、もっと有益な情報を発信できるように頑張ります。
以上、キクチウェブのキクチでした。ではでは。
