問題タブ [scrollmagic]

iFrame でScrollmagicを使用したいと考えています。これを機能させる方法はありますか？

例: http://raet.boldinteractive.nl/staging/iframe.html

4番目のセクションにはトリガーがあります（インジケーターを参照）

ユーザーがページを下にスクロールしたときにサイトのヘッダーを非表示にしたいのですが (ScrollMagic で簡単に実行できます)、ユーザーが上にスクロールしているかどうかを検出するために ScrollMagic を使用できるかどうかはわかりません。ヘッダーを再度表示します。

厄介な部分は、最初のスクロールダウンではメイン サイト ラッパーの単純なオフセットを設定できることですが、ページ スクロール中の任意の時点で発生する可能性があるスクロールでは、これを達成するために ScrollMagic のイベントをどのように使用できるかわかりません。

どんな助けでも感謝します。

ダン

GSAP と ScrollMagic がどのように連携するかを理解しようと試み始めたばかりで、このクールなガイド サイトhttp://scrollmagic.io/examples/basic/simple_velocity.htmlのソース コードをフォローアップすると、私の環境では機能しません。コードペン。

これは、黒い線がウィンドウの上部に達した後に「scene2」を拡大する意図を持った私のものです: http://codepen.io/anon/pen/xZxZXm

これは私のjsがどのように見えるかです:

html は次のようになります。

スクロールするときにsvgクリップパスをトゥイーンするためにscrollmagicを使用しています。通常、svgs (または div やセクションなど) では、html で最後に指定するものが z-index に関して一番上にありますが、それを css で変更します。私は自分の svg でこれをやろうとしたので、最初の svg がトゥイーンしている間、他の 1 つがその後ろにスクロールアップします。ただし、スクロールマジックが私のz-indexingの機能を妨げているようです。何か案は？

http://codepen.io/kathryncrawford/pen/BoXOMJ

CSS

巨大な画像とその下にコンテンツがあるインデックスページで、スクロールマジックを使用して基本的な 2 レイヤーの視差効果を作成しようとしています。ドキュメントとソースコードを数回見ましたが、機能していないようで、何が欠けているのかわかりません。

html:

CSS:

視差.js:

まず第一に、私は GSAP と ScrollMagic を初めて使用するので、ここでばかげた質問をしている可能性がある場合はご容赦ください。私はインターネットを見てきましたが、私の問題に対する正しい答えを見つけることができませんでした.

とにかく、私はタイムラインを作成しようとしています。各「to」関数の完了時に、特定のパラメーターを使用して外部関数への呼び出しが行われます。

ここで何が起こるか: スクロール位置が「#trigger-event」に達すると、タイムラインが呼び出されます。その後、「.to」関数は、トリガー イベントの後、終了 (期間) 前のスクロール位置に基づいて呼び出されます。

ここで直面する問題は、onComplete 関数がページの読み込み時に直接呼び出されることです。これはおそらく「.setTween(timeline)」と関係があります。タイムライン全体に読み込まれると想像できます。

私の問題の解決策は何ですか、または良い代替方法は何ですか?

編集: ここに JSFiddle があります: https://jsfiddle.net/04db5ja5/

よろしくお願いします、エンツィオ