Wix Studio エディタ:スクロールアニメーションを追加する
読了時間:7分
スクロールアニメーションを追加して、より魅力的で印象的なブラウジング体験を作りましょう。アニメーションの進行状況はスクロールの位置に直接リンクされており、訪問者が上下にスクロールすると要素が表示または変換されます。
ヒント:
Wix Studio アカデミーのコースで、アニメーションとインタラクションの追加について学びましょう。(英語)
スクロールアニメーションを追加する
新しいスクロールアニメーションを追加するには、トリガーとなる要素を選択します。選択したアニメーションは、訪問者がこの要素までスクロールしたら開始されます。次に、アニメーション化する要素を決定し、アニメーションタイプ(「イン」または「アウト」)を選択します。

スクロールアニメーションを追加する方法:
- 該当する要素またはセクションを選択します。
- エディタ右上の「要素設定パネルを開く」アイコン
をクリックします。

- 「アニメーションとエフェクト」タブ
をクリックします。
- 「スクロール」下の「+追加」をクリックします。
- アニメーションを設定します:
- 「アニメーション要素」下でアニメーションを表示する要素を選択します。
- 「アニメーションタイプ」下のオプションを選択して、要素が元の配置にアニメーションするか、元の配置からアニメーションするかを決定します:
- イン:アニメーションの終了点は、キャンバス上の現在のデザインです(例:スクロールダウンすると要素がフェードイン)。
- アウト:アニメーションの開始点は、キャンバス上の現在のデザインです(例:スクロールダウンすると要素がフェードアウト)。
- リストからアニメーションを選択します。
ヒント:アニメーションにマウスオーバーすると、アニメーションのプレビューが表示されます。

注意:
- ピン留めした要素は、常に同じ位置(訪問者のビューポートからの相対位置)に留まるため、トリガーとして設定することはできません。
- スクロールアニメーションが正しく表示されるように、ページに十分なスペースがあることを確認してください。たとえば、要素がページの最初または最後のフォールド(折り返し)にある場合、スクロールアニメーションが表示されないことがあります。
横スクロールをお探しですか?
要素設定パネルのオプションは縦スクロールに適用されますが、Wix アカデミーのチュートリアルに従うことで、印象的な横スクロール効果を作成することができます。(英語)
スクロールアニメーションをカスタマイズする
アニメーションを選択したら、希望通りの動作になるように設定します。利用可能な設定は、選択したアニメーションによって異なります。
スクロールアニメーションをカスタマイズする方法:
- 該当する要素またはセクションを選択します。
- エディタ右上の「要素設定パネルを開く」アイコン
をクリックします。

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

スクロールアニメーションの領域を設定する
スクロール中にアニメーションが開始および停止するポイントを選択します。0% は画面の下部、100% は画面上部を表します。
たとえば、領域を 0% - 50% に設定した場合、アニメーションは要素が画面の一番下にあるときに開始し、中央に達したときに停止します。
スクロールアニメーションの領域を設定する方法:
- 該当する要素またはセクションを選択します。
- エディタ右上の「要素設定パネルを開く」アイコン
をクリックします。

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

アニメーション領域をテストする:
「スクロールしてプレビューする」トグルを有効にすると、「アニメーション領域」スライダーにインジケーターが表示されるため、アニメーションが表示される画面の正確な部分をより良く理解することができます。
スクロールアニメーションを削除する
スクロールアニメーションは、要素設定パネルからいつでも削除できます。
スクロールアニメーションを削除する方法:
- 該当する要素またはセクションを選択します。
- エディタ右上の「要素設定パネルを開く」アイコン
をクリックします。

- 「アニメーションとエフェクト」タブ
をクリックします。
- 該当するアニメーションにマウスオーバーし、「その他のアクション」アイコン
をクリックします。
- 「削除」をクリックします。

スクロールアニメーションのトラブルシューティング
スクロールエフェクトが遅すぎる
スクロールアニメーションが希望通りに動作しない場合は、「アニメーションパス」と「アニメーション領域」の 2つのプロパティを確認する必要があります。こちらの動画ガイドに記載されている手順に従って、遅延の原因と修正方法を確認してください。
(モバイルのみ)横向きではスクロールエフェクトは表示されません。
モバイル端末でクライアントのサイトを閲覧している際、訪問者がブラウズ中に画面を回転させると、スクロールアニメーションが機能しなくなることがあります。つまり、ページをスクロール中にスマホを横向きに反転させた場合、スクロールアニメーションは表示されなくなります。
この問題を解決するには、訪問者が横向きの状態でページを再読み込みすることで、アニメーションが「再起動」します。