以前のドキュメントです。以前のドキュメントです。サイト上でスクロールイベントと連動するアニメーションなど、ちょっとした振る舞いを加えたくなる時は多くあります。やり方は多くありますが、最も少ないコード量と依存で実現できる方法はおそらく、特定のスクロールイベントを発火させるフックを作成する、カスタムディレクティブを使用することでしょう。インスタンス作成前に登録されなければなりません。以下のケースでは、中間値を遷移するスタイルプロパティも必要となります。ライブラリーを使用することで、コードはよりシンプルになります。トランジションは取り除くことができるでしょう。ディレクティブに対する豊富なオプションがあります。それらのオプションは一般的なユースケースをほとんど網羅し、とても生産的な開発体験を提供することでしょう。フレームワークに網羅されていないニッチなユースケースを持っていたとしても、フレームワークに網羅されているユースケースと同様に付け加えることができます。簡単に必要とするカスタムディレクティブを作成できるからです。要素に対してスクロールイベントの着脱は本当に良いユースケースです。参照しなければならないためです。このパターンはトラバーサルを回避し、参照先のノードとイベントロジックのペアを保つことができます。統一感のあるサイトを作成する過程で、様々な箇所で同じアニメーションロジックを再利用していることに気づくこともあるでしょう。それはシンプルなロジックに見えますが、カスタムディレクティブは再利用し辛いものになっているかもしれません。何も考えずに再利用すれば、使用の度にほんの些細な変更を必要とすることになるでしょう。簡潔で読みやすいコードの維持に役立てるため、ページを下にスクロールするときにアニメーションの開始・終了座標といった定義済みの引数を渡したくなります。この例はフルスクリーンバージョンの方が見やすいです。つの異なるアニメーションがあります。内の個々のパスに沿って動く描画アニメーションです。つのアニメーションを再利用するため、それぞれのカスタムディレクティブを作成します。カスタムディレクティブに渡す引数は、シンプルかつ再利用可能なコードの維持に役立ちます。やり方を示すために、モーフィングシェイプの例を見てみましょう。ここでは開始・終了座標の状態と共に、モーフィングを作成するパス値が必要です。して定義されています。}})それではテンプレートでこのアニメーションを使用してみましょう。この場合、clipPath要素にディレクティブを加え、全ての引数をオブジェクトとしてディレクティブに渡します。/></clipPath>他のパターンカスタムディレクティブは非常に役に立ちます。スクラッチで作るのではなく、スクロールライブラリにすでに存在する機能を使いたい場合もあるかもしれません。Scrollmagicは豊富なエコシステムがあると同時に、優れたドキュメントやデモを用意しています。これには、パララックス、カスケードピンニング、セクションワイプ、レスポンシブデュレイションなど多様な機能が内包されています。