Smart Sliderの『セッティング：アニメーション』について解説しています。Pro版の機能も含めて解説しているので、すでにPro版ユーザーの方、または、これからPro版を使い始める方にとって有益になるよう構成しています。
また、無料版ユーザーの方にとっても基本操作の理解が深まるように記述しており、合わせて『Pro版アップグレードで可能になること』のイメージも明確になると思います。
本記事は、パソコンの画面から見ていただくことを推奨します。
スライダー設定 (アニメーション)
スライダー設定の『アニメーション』について解説していきます。
Main animation
『Main animation』では、スライド切替えの基本的な動きについて設定していきます。
以下のようにプルダウンから、切替えアニメーションの種類を選択できますので、それぞれ動きを確認してみると良いでしょう。
『Duration』では、次のスライドに切替わるまでの時間を設定できます。800MS(ミリセカンド)は、0.8秒です。もっと遅くしたいなどの場合は数値を調整します。
『遅延(Delay)』は、矢印ボタンなどで特定のスライドを表示した際「遅延」指定された時間待機した後で次のスライドに移動を開始します。
『Easing』では、スライド切替え時の、スピード変化のバリエーションを設定できます。
例えば、ゆっくり動き出して最後は速くなる。あるいはその逆とか。たくさんの種類から選択できますので、いちど確認してみると良いでしょう。
『Carousel』オン：最後のスライドまで行くと、自動的に最初のスライドに戻る
『Carousel』オフ：最後のスライドまで行くと、自動再生がストップする
この『Main animation』で設定しただけでは、スライド切替の自動再生は行われません。スライダー設定「アニメーション」のとなりのタブにて『自動再生』をオンにする必要があります (デフォルトではオフ) のでご注意ください。
Background animation
『Background animation』では、スライド切替時、『Main animation』の動きとは別に、スライドの背景画像に対して、モーフィングやディストーションなどの高度なアニメーションを設定することが出来ます。
プラスボタンを押すと、アニメーションのリストが表示されますので、好みのものを選択したら「適用」を押します。(元の画面に戻ったら、右上の「保存」を必ず押す。)
『速度』で、スライド切替のスピードをプルダウンから選択できます。
『Shifted』では「Background animation」を「Main animation」の移動が終了するまで待機させるか(オン)、待機させないか(オフ）を選択できます。
プレビュー等で実際に動きを見ながら、MainとBackground 両方のアニメーションの種類や速度を考慮して、良い具合に調節すると良いでしょう。
「自動」に設定しておくと、基本は待機で、画像やテキストなどの上物レイヤーが無い時だけ待機しない、となるので、基本は「自動」で問題ないことが多いのかと思います。
『Ken Burns effect』では、スライド切替え時の背景画像に対して、ズームやパンなどの効果を加えることが出来ます。
有効にすると、以下のように「速度」や「強さ」も調節できるようになります。
Effects
『Effects』では、『Shape Divider(区切り)』と『Particle Effect』という２種類の強力なエフェクトにより、リッチな表現を実装することが出来ます。
Shape Divider
背景画像の形（シェイプ）にスタイリッシュな変化を加えることができます。シェイプの種類は30種類以上あり、カラーや動きのスピードなど自由に設定できます。
以下のシェイプ（背景画像）には、上部に「Curve 4」、下部に「Masked waves」というエフェクトが使われています。
『区切り』の設定画面を開いて、背景画像の上部か下部かを選び、プルダウンから「Type」を指定します。
「Animate」をオンにしておくと、プレビューで実際の動きを見ながら、各パラメータを調整することが出来ます。最後に「適用」を押して、元の画面に戻ったら「保存」を押して確定させます。
Particle Effect
こちらは、パーティクル(粒子) や幾何学模様をアニメーションさせるエフェクトです。粒子の大きさや数、動くスピードなどは調整することができます。パターンは10種類用意されていますが、自分でカスタマイズしたものを使用することもできます。
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.
こちらも設定画面を開いて、プルダウンから「効果」を指定します。
エフェクトの見た目や動きを見ながら、各パラメータを調整していきましょう。
レイヤーアニメーション
ここまで解説してきた「Main animation」や「Background animation」は、スライドの切替え時におけるアニメーションのことでした。
『レイヤーアニメーション』とは、個々のスライド上にレイヤーとして配置した、テキストや画像、ボタンなどの要素に個別に設定されたアニメーションのことです。
・Play on load (オン)：スライドを初めて表示した時にレイヤーアニメーションを再生
・１度再生：レイヤーアニメーションが再生されるのは１度だけ
・再生タイミング：Main animationの開始と同時か、Main animationが終了してからか
・モード：スライドの切替時に、
・スキップ可能：アウトゴーイングのアニメーションはスキップされる
・強制：すべてのアウトゴーイングのアニメーションが再生されるまで、
スライドは切り替わらない
具体的なレイヤーアニメーションの設定は、この「スライダー設定 (アニメーション)」の項目ではなく、個々のスライド編集画面にて設定していくことになります。
スライド編集画面の解説については、別記事で詳しく解説予定です。
Layer parallax
parallax とは「視差」効果のことです。こちらも parallaxの設定自体は、個々のスライド編集画面にて行いますが、ここでは、効果の適用方法について設定していくことになります。
・モバイル ：スマホでもparallax効果を有効にしたい場合はオン。一部のモバイルブラウザでは再生されないことも。
・3D：オンにすると、parallax効果に上下の動きだけでなく、曲がる動きも加わる。
・Animate：オンにすると、スライダー内にカーソルを置いた際の挙動が滑らかに動く
『水平方向』『垂直方向』では、マウスやページスクロール動作による、視差効果を発生させる方向を設定します。無効にすることも可能。
『Mouse Origin』では、視差効果をマウスカーソルから発生させるか、スライダーの中心から発生させるかを選択できます。
『Scroll Move』では、ページスクロールした場合における、上下方向の視差効果を制限することが出来ます。
・両方 ：上下方向、どちらへのスクロール時も視差効果が制限されない
・上へ：上方向へのスクロール時は視差効果が制限されない。下方向は制限される。
・下へ：下方向へのスクロール時は視差効果が制限されない。上方向は制限される。
まとめ
今回は、『スライダー設定』の『アニメーション』について解説いたしました。 ここでの設定は、あくまでスライダー全体に適用させるアニメメーション設定です。
個々のスライドのテキストやボタン、画像など各レイヤー要素に対するアニメーション(レイヤーアニメーション)は、スライド編集画面にて個別に行うことになります。
スライド編集の詳細については、別記事であらためて詳しく解説する予定です。
ーーー
『スライダー設定』には、この後に、
『自動再生』『最適化』『スライド』『開発者』などの項目があり、それらの詳細についても、あらたに関連記事を追加していきます。
Pro版を使ってみる
本記事を読んで『Pro版を使ってみたい』『興味が湧いた』と思われた方は、以下の記事で導入方法を詳しく解説しております🚀
コメント