Point：Studioでアニメーションやエフェクトを設定する
Studioでは、アニメーションやエフェクトなど、動きのある表現を条件付きスタイルを利用して設定します。
サイト内のボックス要素に、通常時のスタイルと条件付きスタイルの両方を設定すると、その差分がアニメーションとして再生されます。アニメーションの動き方は「イージング」「時間」「遅延」の3項目で調整します。
条件付きスタイルの「スクロール」では、スクロールに伴って要素が動くエフェクト表現を設定できます。
下からフェードインする表現は、条件付きスタイル「出現時」でY方向の移動と不透明度の変化を組み合わせて作ります。これにより、要素が下から上へ移動しながら現れるように見えます。
下からフェードインするアニメーションを作成する
フェードしながらスライド表示させるアニメーションの作成手順を紹介します。
アニメーションを設定したい画像やテキストを、追加パネルから配置します。
対象のボックスを選択します。
右パネル右上の[条件スタイル]をクリックし、[出現時] を選択します。パネルが閉じている場合は、右パネルを開いてください。
[出現時]のテンプレートから、[下からフェードイン]を選択します。
[出現時] のスタイル設定モードで、テンプレートであらかじめ設定されている値がピンク色にハイライトされます。動きを調整したい場合には、それぞれの値を修正してください。
ライブプレビューで動作を確認します。
公開済みサイトを編集している場合には、公開パネルでサイトを更新します。この操作を行うまで、公開サイトへは反映されません。