問題タブ [scrollmagic]

Enquire.js が一致しない場合にシーンを破棄する適切なコードは何でしょうか? 私はあまり運がなくても ScrollMagic.js のドキュメントを調べてきました: http://scrollmagic.io/examples/expert/removing_and_destroying.html

コンソールでは、Unmatch で次のように表示されます。

Uncaught TypeError: a.destroy is not a function

ブラウザの右側にある修正テキストトリガーを削除するには?

Googleで検索しました。誰かが scene.addIndicators() を削除するように指示しましたが、それを削除するとスクロールがなくなりました。

これはスクリーンショットです

これは私のコードです

スクロール時にアニメーションが発生するようにScrollMagicを使用しています。私はこれにあまり精通していません。まだ学習過程にあります。

そのため、パーツが分解され、スクロール上で組み合わされて飛行機を形成する飛行機があります。

たとえば、左翼、右翼、機体、尾翼、左プロペラ、右プロペラ、これらすべてのパーツが分離され、さまざまな方向から飛行機を形成しています。

これを 1366x768 の画面解像度で動作させることができました。しかし、別の画面解像度で開くと、パーツが正しい位置に組み立てられません。 http://jsfiddle.net/jv5s6f0j/1/

HTML - (各 ID には背景画像があります)

JS-

固定ピクセルの代わりにパーセンテージを使用してみましたが、問題は解決しません。助けてください！

ScrollMagic は初めてですが、気に入っています。

そのため、飛行機のパーツをまとめて飛行機を形成するタイムラインがあります。飛行機のトゥイーン部分を飛行機全体の単一の画像に変更し、単一の画像をピン留めするつもりです。

飛行機の部品を組み立てることができましたが、どのように進めればよいかわかりません。

これを達成する方法の手がかりはありますか？

これは私が今まで達成したことのフィドルです

HTML -

JS -

CSS -

これは同じフィドルです - http://jsfiddle.net/joystan/x2f0atdj/

スクロールマジックの例を提供してくれたGrey Ghostに感謝します：

paneling http://codepen.io/grayghostvisuals/pen/enxAp

anchor navhttp://codepen.io/grayghostvisuals/pen/EtdwL

スクロールマジックでパネリングが何に使用されるかを説明したい人はいますか? アンカー ナビゲーションとの違いは何ですか。また、おそらく iscroll を使用して、マウスホイールに非スクロールバーベースを作成する方法はありますか?

視差セクションのワイプ視差効果にscrollmagicを使用しています。ここにあるデモを正確にフォローしてきましたが、何もうまくいかないようです。私は何時間もこれにいたので、私は夢中になっています。ここで何を除外していますか？

ここにjsfiddleがあります

HTML

CSS

JavaScript/JQuery

ご協力ありがとうございます。

赤いカードが画面の上部にピン留めされ、黄色のカードがその上を転がるこのレイアウトがあります。黄色の下端が赤の下端に達したら、赤の固定を解除する必要があります。これにより、黄色が赤をつかんで上に引っ張るように見えます。

私の見解ではremovePin()、別のシーン、.yellowastriggerElementを使用するシーンから呼び出す必要がありますoffsetが、うまくいきませんでした。私も a を設定しようとしましたdurationが、黄色が赤にロールオーバーすることはありません。代わりに、期間が下から現れるまで待ちます。

HTML:

Javascript:

JSfiddle: http://jsfiddle.net/rLj18ud2/

私は 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。ウィンドウのサイズを少し変更してトリガーする必要があります。