Wix Studio エディタ：スクロールアニメーションを追加する | サポートセンター

Wix Studio エディタ：スクロールアニメーションを追加する

読了時間：4分

スクロールアニメーションを追加して、より魅力的で印象的なブラウジング体験を作りましょう。アニメーションの進行状況はスクロールの位置に直接リンクされており、訪問者が上下にスクロールすると要素が表示または変換されます。

この記事では、以下の項目について説明します：

新しいスクロールアニメーションを追加するには、トリガーとなる要素を選択します。選択したアニメーションは、訪問者がこの要素までスクロールしたら開始されます。次に、アニメーション化する要素を決定し、アニメーションパスを選択します。

該当する要素またはセクションを選択します。
エディタ右上の「要素設定パネルを開く」矢印アイコンをクリックします。
「操作」タブをクリックします。
「スクロール」下の「＋追加」をクリックします。
アニメーションを設定します：
1. 「アニメーション要素」下でアニメーションを表示する要素を選択します。
2. 「アニメーションパス」下のオプションを選択して、デザインした要素を基準にしたアニメーションの開始方法を決定します。キャンバス上のデザインを、アニメーションの開始点（「デザインを起点に」）または終了点（「デザインに向かって」）にすることができます。
3. リストからアニメーションを選択します。
  ヒント：アニメーションにマウスオーバーすると、アニメーションのプレビューが表示されます。

アニメーションを選択したら、希望通りの動作になるように設定します。利用可能な設定は、選択したアニメーションによって異なります。

該当する要素またはセクションを選択します。
エディタ右上の「要素設定パネルを開く」矢印アイコンをクリックします。
「操作」タブをクリックします。
変更したいアニメーションをクリックします。
「アニメーションを調整」をクリックして設定を変更します：
- 方向：アニメーションの方向を選択します（例：横、縦）。
- スケーリング：このアニメーションの要素のターゲットサイズを設定します。たとえば、80% を選択した場合、要素がアニメーションで 20% 縮小することを意味します。
- 距離：このアニメーションで要素が移動する距離を決定します。
- アニメーション領域：スクロール中にアニメーションが開始および停止するポイントを決定します。0% は画面の下部、100% は画面上部です。たとえば、領域を 100％に設定した場合、アニメーションは要素が一番下にあるときに開始し、一番上に達したときに終了します。

ヒント：

「スクロールしてプレビューする」トグルを有効にして、作成中のアニメーションをキャンバス上で直接確認できます。

スクロールアニメーションは、要素設定パネルからいつでも削除できます。

この記事では下記を説明します：