ワイプは、パーツやインナーに色の幕がかかった状態から、幕がはがれるように中身が現れるアニメーションです。幕の色をサイトのアクセントカラーにすると、印象に残る見せ方ができます。
見え方
設定のしかた
- ワイプを付けたいパーツ（またはインナー・コンテナ・セクション）を選びます。
- 右側のプロパティメニューで「アニメーション」タブを開き、「アニメーション」で「ワイプ」を選びます。
- 方向、ワイプの範囲、ワイプの色、トリガーとタイミングを設定します。
- ツールバー右端の「▶」で動きを確認します。
ワイプの設定項目
| 項目 | 内容 |
|---|---|
| 方向 | 幕がはがれていく方向。上から下／左から右／下から上／右から左 から選びます。 |
| ワイプの範囲 | 幕の範囲を％で指定します。 |
| ワイプの色 | 幕の色と不透明度（％）を指定します。 |
トリガー・タイミングなど共通の設定については、アニメーションとはをご覧ください。
設定例
| やりたいこと | 設定 |
|---|---|
| 見出しと文章を、アクセントカラーの幕から登場させる | 見出し・文章が入ったインナーにワイプ。方向：左から右、ワイプの色：サイトのアクセントカラー |
| 写真を幕が開くように見せる | 画像にワイプ。ワイプの色：写真と差のある色 |
幕の色が背景と同じだと、動きが見えない
ワイプの色を背景と同じ色にすると、幕が見えず、動いていることがほとんど分かりません。背景と差のある色を選んでください。