1

私はそれに夢中になっていますが、これはそれほど複雑ではありません。要素がブラウザの中央にスクロールされたときにアニメーションが発生する 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。うまく説明できていなかったら申し訳ありませんが、言葉にするのは少し難しいです。これの主なポイントは、コードを減らすことです。どんな助けでも大歓迎です！

4

2 に答える 2

1

あなたの答えはあなたの説明にあります。その通りです。両方がトリガーされなければ、クラスを共有するフェード要素を 1 つ持つことはできません。2 つの要素に個別の ID を指定し、共有クラスではなく、それらの ID を使用して 2 つの個別のトゥイーンを作成します。

于 2013-02-27T20:23:28.460 に答える
0

2 つの別個のトゥイーンを使用します。それが意図された動作です。

于 2013-02-10T21:25:18.423 に答える