Smart Sliderで利用出来る『レイヤーアニメーション(Reveal Animation)』について解説しています。Pro版の機能も含めて解説しているので、すでにPro版ユーザーの方、または、これからPro版を使い始める方にとって有益になるよう構成しています。
また、無料版ユーザーの方にとっても基本操作の理解が深まるように記述しており、合わせて『Pro版アップグレードで可能になること』のイメージも明確になると思います。
本記事は、パソコンの画面から見ていただくことを推奨します。
Revealアニメーション
『Reveal』は、レイヤーアニメーションのひとつで、テキストや画像などのレイヤーを表示させる直前に、カラーボックスを装飾的にアニメーションさせる、効果的なエフェクト機能です。
＊「レイヤーアニメーション」設定方法の解説はこちら
『Reveal』アニメーションの例。
カラーボックスがアニメーションした後に、テキストや画像のレイヤーが表示されます。
ここでは、以下の『列』レイヤーと『画像』レイヤーの２つに『Reveal』アニメーションを設定していく流れを見ていきましょう。
Reveal 設定の手順
まず『画像』レイヤーを選択して、『レイヤーウィンドウ』の『アニメーション』タブから、『Reveal』→『Left to Right』をクリックします。
以下のように『Reveal』アニメーションの設定画面に表示が切り替わります。
『色』で、ボックスのカラーを設定します。ここでは以下のようなピンクベージュ系に設定しておきます。
『Duration』(アニメーションする時間の長さ)と、『遅延』(アニメーション開始するまでの時間)は、変更なしとします。
『From』『To』、『Easing』、『コンテンツ』は豊富な種類から選ぶことが出来るので、いろいろ試して動きを確認すると良いでしょう。ここでは変更なしとします。
・『From』『To』：それぞれボックスのアニメーションの種類を選択
・『Easing』：アニメーション速度の変化の仕方を選択
・『コンテンツ』：レイヤーの中身(画像やテキストなど)の表示のさせ方を選択
続いて、複数の「テキスト」「画像」「アイコン」などを内包した『列』レイヤー自体に『Reveal』アニメーションを設定していきます。
こちらは『色』にグレーカラーを設定してみます。
『遅延』は、500MS(0.5秒)にして、最初に設定した『画像』レイヤーとは、動きだしに若干の差をつけます。
以上の設定によって、カラーボックスが、左からスライドイン → 右にスライドアウトする基本的な『Reveal』アニメーションが設定できました。
Revealのパターン変更
『From』『To』や『コンテンツ』の設定を変えることで、さらに動きのパターンをいろいろ変化させることが出来ます。
・『From』：Skew – 左、
・『コンテンツ』：スケールダウン
に変更すると以下のような動きになります。
まとめ
今回は、Smart Slider3 Proの『レイヤーアニメーション(Reveal Animation)』設定の流れについて解説いたしました。
こうした動きを取り入れることで、より洗練された、目を惹くスライダーやWebページを表現することが出来そうですね。コーディングの知識が無くとも、数クリックで実装できてしまいますので、おすすめの機能のひとつと言えます。
Pro版を使ってみる
本記事を読んで『Pro版を使ってみたい』『興味が湧いた』と思われた方は、以下の記事で導入方法を詳しく解説しております🚀
Pro版の機能を含めた使い方については、詳しく解説した記事を少しずつ追加しておりますので、こちらもぜひご覧ください👇👇👇
コメント