チェーントリガーを使った微妙な視差スクロール効果のデザイン作成方法

2024/05/28

はじめに

近年、パララックス（視差）がウェブサイトやモバイルアプリのトレンドとなっている。視差スクロール効果は、ウェブサイトの背景が前景よりも遅いペースでスクロールするテクニックです。その目的は、ウェブサイトの2Dシーンで奥行きのある錯覚を実現することです。

この記事では、ProtoPieのChainトリガーを使って視差スクロール効果を作る方法を学びます。

最終的には、このようなものが作れるようになります！

プロトタイプを開始する前に、視差スクロールの仕組みを理解し、視差スクロール効果を最適化するためのレイヤーを構成してみましょう。

視差効果を作るには、すべての要素が異なるペースと時間で動かす必要があります。そうすることで、2Dでスクロールしているにもかかわらず、奥行きがあるように見えるのです。

経験則では、現実世界での見え方のように、「最も遠い」オブジェクトを最も小さく動かします。

視差スクロールでは、各要素のプロパティを個別に調整するために、各要素を別々のレイヤーに配置する必要があります。アセットファイルを見て、画像アセットがどのように別々のレイヤーに配置されているか確認してみましょう。

他のレイヤーの視差の動きをトリガーするために、スクロールコンテナが必要です。フルスクリーンサイズ（1440*900）のスクロールコンテナを追加しましょう。
OthersとFrontのレイヤーをスクロールコンテナにドラッグします。この2つのレイヤーは、スクロールコンテナと一緒に動くようにします。

Preview（プレビュー）をクリックすると、ページを上下にスクロールしても、視差効果はまだ表示されません。その理由は、チェーントリガーに何も反応を追加していないからです！

💡 ヒント：プロトタイプのプレビューでスクロールのインタラクションが表示されない場合は、Scroll PagingレイヤーのプロパティをScrollに、Directionをverticalに設定してみてください。

チェーントリガーを使用する

チェーンは、他のレイヤーのプロパティの変更に基づいて、レイヤーのプロパティを変更できる条件付きトリガーです。

例えば、下の画像で緑のボックスを上下にドラッグすると、赤いボックスのサイズが変化します。ProtoPieでは、赤いボックスのスケールが緑のボックスのY位置に「Chain」されているため、このようなことが可能です。

この視差スクロールのチュートリアルでは、要素の位置をスクロールコンテナのスクロール位置に「連鎖」させます。

1. Chain Triggerをスクロールコンテナに追加します。

2. 視差の仕組みを覚えていますか？一番遠いオブジェクトが、スクロール中に一番小さく動くはずです。

アセットファイルでは、Frontレイヤーが一番近くにあり、Skyレイヤーが一番遠くにあります。Frontレイヤーはスクロールコンテナの中にあるので、Frontレイヤーにチェーンレスポンスを追加する必要はありません。
2つ目のレイヤーを選択し、チェーントリガーの下に移動のレスポンスを追加します。まず、スクロール範囲を 0 から 900 に設定します。次に、Yレンジを525から-225に設定します。
これらの数値は何を意味するのか？つまり、ユーザーが0から900ピクセルまでスクロールすると、セカンドレイヤーは750px移動します。これは、初期位置（525）からレイヤーの終了位置（-225）までの距離です。