0

現在、scrollorama jquery プラグイン ( http://johnpolacek.github.io/scrollorama/ )を調査しています。

これまでのところ、これは優れたプラグインですが、私のニーズを正確には満たしていません。これは私の考えなので: 訪問者が特定の div にスクロールすると (次の値を取得したとしましょう: blockIndex = 1)、トップバーをアニメーション化します。しかし、scrollorama で実際に見つけられるのは、スクロールしたばかりの div にあるものを実現することだけです。

if (i != '1') { $( ".top" ).animate({opacity: 0.25,left: "+= 50",高さ: "トグル"}, 5000, function() {}); };

結果が表示されず、インターネットで解決策が見つかりませんでした。それで、私は基本的に何を探していますか？現在の bloxindex 番号を追跡し、それを使用して Web サイト内の他の要素をアニメーション化できる、scrollorama の有無にかかわらず (あれば素晴らしい) ソリューション。

それが機能するかどうかは正確にはわかりませんが、答えが見つかることを願っています!

乾杯、

リック

4

1 に答える 1

0

ちょっとリック私はこの同じ問題に遭遇しました.これを回避する簡単な方法がありますが、それはスクロールラマの問題ではありません. 少し更新されているので、代わりにhttp://johnpolacek.github.io/superscrollorama/を使用することもお勧めします。

Greensock は、良くも悪くも、jquery アクションの範囲をアニメーションに使用されている $this パラメーターの範囲に制限して、問題を回避します。呼び出す関数のスコープを設定することで、それを回避する方法があります。

jquery this 要素のスコープをページの別の部分に設定することで、これを回避しました。私の例では、トゥイーンと同じ場所を使用しましたが、実際にはスコープを任意の有効な jquery セレクターに設定できます。最新の greensock プラグインを使用していることを確認する必要があります。追加のドキュメントはhttp://api.greensock.com/js/にあります。

var timeLine1 = new TimelineLite({align: "sequence"})
.append([TweenMax.to($('#display-platform-list .frame-1'), 2, {css:{display:'block'},onUpdate:removeSiblings,onUpdateScope:$('#display-platform-list .frame-1')})])
.append([TweenMax.to($('#display-platform-list .frame-2'), 2, {css:{display:'block'},onUpdate:removeSiblings,onUpdateScope:$('#display-platform-list .frame-2')})])
.append([TweenMax.to($('#display-platform-list .frame-3'), 2, {css:{display:'block'},onUpdate:removeSiblings,onUpdateScope:$('#display-platform-list .frame-3')})])
.append([TweenMax.to($('#display-platform-list .frame-4'), 2, {css:{display:'block'},onUpdate:removeSiblings,onUpdateScope:$('#display-platform-list .frame-4')})])
.append([TweenMax.to($('#display-platform-list .frame-5'), 2, {css:{display:'block'},onUpdate:removeSiblings,onUpdateScope:$('#display-platform-list .frame-5')})])
.append([TweenMax.fromTo( $('#platform .callout'), 1, {css:{opacity: 1}}, {css:{opacity: 0}})]);

function removeSiblings(){
    $(this).siblings().hide();
}
于 2013-10-23T20:37:30.583 に答える