アニメーションとグループ
バーの表示方法、スクロール、グループの切り替え方法を設定します。
アニメーションは Design パネルの最下部にあります。バーがページに表示されるときの動きと、グループが切り替わるときの動きという、2つの設定があります。
Entranceは1回だけ再生され、グループの切り替えは繰り返されます。
Entrance
Section titled “Entrance”ページの読み込み時にバーが行う動きです。
| Entrance | 見た目 |
|---|---|
| None | バーがそのまま表示されます |
| Fade in | フェードインで表示されます |
| Slide down | 上から降りてきます |
| Slide in from left | 左端から入ってきます |
| Slide in from right | 右端から入ってきます |
| Continuous scroll | メッセージがバーの端から端まで繰り返し流れます |
Speed は、表示にかかる時間を設定します。連続スクロールでは Scrolling speed となり、かかる時間ではなく文字が動く速さを設定します。
連続スクロール
Section titled “連続スクロール”この機能は個別に説明します。メッセージがバーを端から端まで横切り、通り過ぎると次のグループが同じように流れます。途切れることはありません。
これには次のような特徴があります。
- 1行に収まらない長いメッセージに向いています
- バーの上にマウスポインターがある間は一時停止するため、バー内のボタンもクリックできます
グループの切り替え
Section titled “グループの切り替え”これらの設定は、バナーに複数のグループがある場合にのみ表示されます。
Change group every は、各グループを画面に表示する秒数です。
Group transition は、次のグループへの切り替え方です。
| Transition | 見た目 |
|---|---|
| Cross-fade | 1つ目がフェードアウトしながら、次がフェードインします |
| Slide | カルーセルのように、バーが横にスライドします |
スライドを選ぶと、Arrows というオプションが追加されます。オンにすると、バーの両端に小さな ‹ と › のコントロールが表示され、お客様が自分でグループを切り替えられます。
矢印の有無にかかわらず、バーを横にスワイプまたはドラッグして切り替えることもできます。
ループには継ぎ目がありません。最後のグループの次は、間のグループを巻き戻すことなく、そのまま最初のグループに続きます。
アニメーションのプレビュー
Section titled “アニメーションのプレビュー”セクション下部の Preview animation をクリックすると、ビルダー中央のストアフロントのモックアップで、Entranceとグループの切り替えが再生されます。保存して再読み込みしなくても、動きを確認できます。
もう一度クリックすると停止します。モックアップは、編集中のグループの表示に戻ります。
控えめにするために
Section titled “控えめにするために”デバイスで動きの軽減を設定しているお客様には、動きのないバーが表示されます。Entranceは再生されず、マーキーはスクロールせず、グループも自動では切り替わりません。矢印とスワイプは引き続き使えます。