【簡単】チェーントリガーを使った微妙な視差スクロール効果のデザイン作成方法
2024/05/28
はじめに
近年、パララックス(視差)がウェブサイトやモバイルアプリのトレンドとなっている。視差スクロール効果は、ウェブサイトの背景が前景よりも遅いペースでスクロールするテクニックです。その目的は、ウェブサイトの2Dシーンで奥行きのある錯覚を実現することです。
この記事では、ProtoPieのChainトリガーを使って視差スクロール効果を作る方法を学びます。
何を学べるのか
視差の仕組みを理解する
スクロールコンテナを作成してスクロール可能なビューを作成する
チェーンを使用して、背景要素に異なる速度を設定する
最終的には、このようなものが作れるようになります!

視差の仕組みを理解する
プロトタイプを開始する前に、視差スクロールの仕組みを理解し、視差スクロール効果を最適化するためのレイヤーを構成してみましょう。
どのように機能するのか?
視差効果を作るには、すべての要素が異なるペースと時間で動かす必要があります。そうすることで、2Dでスクロールしているにもかかわらず、奥行きがあるように見えるのです。
経験則では、現実世界での見え方のように、「最も遠い」オブジェクトを最も小さく動かします。

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

ステップバイステップの手順
1. スクロール可能なビューを作るためにスクロールコンテナを作成する
他のレイヤーの視差の動きをトリガーするために、スクロールコンテナが必要です。フルスクリーンサイズ(1440*900)のスクロールコンテナを追加しましょう。
OthersとFrontのレイヤーをスクロールコンテナにドラッグします。この2つのレイヤーは、スクロールコンテナと一緒に動くようにします。

Preview(プレビュー)をクリックすると、ページを上下にスクロールしても、視差効果はまだ表示されません。その理由は、チェーントリガーに何も反応を追加していないからです!
💡 ヒント: プロトタイプのプレビューでスクロールのインタラクションが表示されない場合は、Scroll PagingレイヤーのプロパティをScrollに、Directionをverticalに設定してみてください。
2. チェーンを使用して、背景要素に異なる速度を設定する
チェーントリガーを使用する
チェーンは、他のレイヤーのプロパティの変更に基づいて、レイヤーのプロパティを変更できる条件付きトリガーです。
例えば、下の画像で緑のボックスを上下にドラッグすると、赤いボックスのサイズが変化します。ProtoPieでは、赤いボックスのスケールが緑のボックスのY位置に「Chain」されているため、このようなことが可能です。

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

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

💡 ヒント: レイヤーの開始位置と終了位置は自由に弄ってください。ただし、良い視差スクロール効果を得るには、レイヤーがスクロール範囲より下にあることを確認してください。レイヤーはスクロールと一緒に動くのではなく、少しドラッグするようにします。
3. 同じ方法で、他のレイヤーの移動レスポンスも設定します。
光学的には、レイヤーが遠ければ遠いほど、移動距離は短くなります。レイヤーの移動距離を小さく設定してください。



完成 - 最後に
プレビューをクリックして、プロトタイプの視差スクロール効果を確認してみてください。
このチュートリアル記事で、あなたは視差について、視差効果を実現する方法、チェーントリガーの使い方、そしてそれに対するレスポンスの設定方法について学びました。
さらに重要なことは、ProtoPieで視差スクロール効果を作成できるようになったということです!
このユースケースチュートリアルは役に立ちましたか?1分間のアンケートにご協力ください。