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

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

読了時間：7分

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

ヒント：

Wix Studio アカデミーのコースで、アニメーションとインタラクションの追加について学びましょう。（英語）

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

注意：

ピン留めした要素は、常に同じ位置（訪問者のビューポートからの相対位置）に留まるため、トリガーとして設定することはできません。
スクロールアニメーションが正しく表示されるように、ページに十分なスペースがあることを確認してください。たとえば、要素がページの最初または最後のフォールド（折り返し）にある場合、スクロールアニメーションが表示されないことがあります。

横スクロールをお探しですか？

要素設定パネルのオプションは縦スクロールに適用されますが、Wix アカデミーのチュートリアルに従うことで、印象的な横スクロール効果を作成することができます。（英語）

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

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

ヒント：

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

スクロール中にアニメーションが開始および停止するポイントを選択します。0% は画面の下部、100% は画面上部を表します。

たとえば、領域を 0% - 50% に設定した場合、アニメーションは要素が画面の一番下にあるときに開始し、中央に達したときに停止します。

「アニメーションとエフェクト」タブをクリックします。
変更したいアニメーションをクリックします。
「アニメーションを調整」をクリックします。
「アニメーション領域」下のドットをドラッグして、開始と終了するタイミングを設定します。
ヒント：ドットをクリックして手動で % パーセントを入力することができます。