0

私は Jquery の初心者であり、私の問題の解決策は非常に簡単だと思っていたでしょうが、このコードの順列を何百万回も試しましたが、解決できません。

私は Scrollmagic と GSAP を使用しており、同じポイントから 3 つのトゥイーンをトリガーして、それらが次々と (わずかにオーバーラップして) 起動するようにしたいと考えています。シーンはduration: 0、ユーザーがアニメーションを開始するだけで、その進行を制御しないようにします。各トゥイーンには、同じオブジェクトで動作する CSS 変換が含まれています ( #boxes3d)。

私が目指している効果は次
のとおりです: 1) ボックスは平らに始まりますが、cssperspective値850pxを
2) csstransform値を変更して、ボックスを 180 度回転させます。
3) 元に戻すと、ボックスが再び折りたたまれます。perspective: 50000.
[ 4) ユーザーがトリガーを過ぎて戻ると、アニメーションが反転します。]

複雑なのは、transformscale内部の絶対位置の div#boxes3dを任意の画面サイズのフレームに合わせるために、値に動的な値も組み込む必要があることです。値 (したがってscale全体) は、ネストされたand関数を含むtransform別の Jquery 関数によって動的に設定されます。 トゥイーンをキューに入れるには(または)を作成する必要があると思いますが、動的な CSS 値をタイムラインに入れるのに問題があります。 つなぎ合わせたいトゥイーン/トランジションを含むjsfiddleを作成しました。scaleDiv()rotate3D()reverse3D()

timelineMaxLite

scaleDiv2 番目のトゥイーンに組み込む必要がある関数。現在は別々のシーンになっていますが、1 つのシーン/タイムラインにまとめたいと考えています。

ここにフィドルがあります：http://jsfiddle.net/gbinning/vccxufou/13/。いくつかのガイダンスを本当に感謝します！ありがとうございます！

編集:関数を正しく設定していませんscaleDiv。ウィンドウのサイズを少し変更してトリガーする必要があります。

4

2 に答える 2

0

動的に回転、変換、スケーリングしたいですか? 私は自分のプロジェクトで同じことをしています..これが私のやり方です。多分それはあなたを助けるでしょう。

http://jsfiddle.net/xko7gjty/1/

$("#abox").addClass("rotate");

var dynamicx = Math.random()*300;
var dynamicy = Math.random()*300;
var dynamicscale = Math.random();
var tween = new TweenMax("#abox", 1, {
            top: dynamicx+"px",
            left:dynamicy+"px",
            scale:dynamicscale,
            //ease: Linear.easeNone,
            delay:.2
        });

参考までに、毎回新しいトゥイーンを作成する必要があります。gsap が機能する方法は、トゥイーンを作成するときに、その時点の CSS 値を使用することです。 CSSを変更した場合、元のトゥイーンは元の場所のみを実行します

于 2016-02-18T19:00:31.927 に答える