私はそれに夢中になっていますが、これはそれほど複雑ではありません。要素がブラウザの中央にスクロールされたときにアニメーションが発生する jQuery プラグインであるSuperscrolloramaを使用しています。
ページの異なる領域でブラウザーの中央に到達したときに両方ともフェードする 2 つの要素が必要な場合は、JavaScript で 2 つの別個のトゥイーンを作成する必要があります。スクリプトで参照されているクラスを共有するフェード要素を 1 つ持つことはできません。これは、最初のフェード要素がヒットすると、両方のアニメーションが開始されるためです。これは、私が望むように機能しないコードのスニペットです。
<!--HTML-->
<h2 class="fade-it">Fade It</h2>
<h2 class="fade-it">Fade It again</h2>
<!--JavaScript-->
var controller = $.superscrollorama();
controller.addTween('.fade-it', TweenMax.from( $('.fade-it'), .5, {css:{opacity: 0}}));
そしてjsFiddle。うまく説明できていなかったら申し訳ありませんが、言葉にするのは少し難しいです。これの主なポイントは、コードを減らすことです。どんな助けでも大歓迎です!