問題タブ [scrollmagic]

作業中のシーンに TimeLineMax を追加しました。機能は問題なく機能していますが、いくつかの詳細で問題が発生しています。

このサイトhttp://www.google.com/inbox/#bundlesのようにシーンをピン留めしたいと思います。これにより、ユーザーがアニメーションを表示せずにスクロールできないように、1 つのシーン内に複数のピンが必要になります。

ここに私のこれまでの作業のデモ サイトがあります: https://so-staging.herokuapp.com/users/sign_in#publisher-demo-container

下にスクロールすると、私の進行状況が表示されます。3 つのステップがポップアップし、アニメーションで消えます。また、スクロールに基づいて #publisher-demo-steps の背景位置を調整しました。

ただし、これは望ましい目標ではありません。1. #publisher-demo をピン留めします。 2. ステップ 1 のアニメーション背景位置をスクロールで起動します。3. 焼成ステップ 2 4. 焼成ステップ 3

アニメーションが完了するまでユーザーが次のステップに進めないように、各ステップを固定したいと思います。

私はこれが紛らわしいことを知っており、あまりにも長い間見つめてきました. 助けてくれてありがとう。これが私のスクロールマジックと GSAP コードです。

var controller = new ScrollMagic();

ScrollMagicのこの特定のアニメーションを使用しようとしています

http://janpaepke.github.io/ScrollMagic/examples/advanced/parallax_sections.html

しかし、ファイルを適切にロードするのは非常に困難です。ScrollMagic、GSAP、および GreenSock を含めようとしていますが、どういうわけか、ScrollMagic は以前に GASP をロードするように要求し、GSAP は Main Module が見つからないと言い、それ自体の前に ScrollMagic をロードするように要求します。次のようにjQueryと非同期に実行しています

gsap が最初の場合、次のエラーがログに記録されます。

エラー: ScrollMagic メイン モジュールが見つかりませんでした。このプラグインの前にロードされていることを確認するか、requirejs などの非同期ローダーを使用してください エラー: TweenLite または TweenMax が見つかりませんでした。ScrollMagic の前に GSAP がロードされていることを確認するか、requirejs などの非同期ローダーを使用してください。

これはスクロールマジックがあえぎの前にロードされたときのものです

エラー: TweenLite または TweenMax が見つかりませんでした。ScrollMagic の前に GSAP がロードされていることを確認するか、requirejs などの非同期ローダーを使用してください。

誰かが以前に同じ問題を抱えていましたか？示す実例はありますか？この読み込みの問題を修正して例を機能させるにはどうすればよいですか?

まず、素晴らしい図書館！ScrollMagic の使用を本当に楽しんでいます。素晴らしい！

第二に、この質問の主題が十分に明確であることを願っています...

私が達成しようとしていること：

ビューポートの全幅と高さで、ピン、デュレーション、トゥイーンのタイムラインが設定されたシーンがあります。トゥイーンは正常に機能しており、問題はありません。

また、バックグラウンドに HTML5 ビデオを配置しています。これは、シーンに入ると (自動再生がオフの場合)、シーン コンテナーに挿入されます。私がやりたいのは、すべてのトゥイーンが終了した後、バックグラウンドでビデオ (シーンのフルサイズ) を再生し、シーンが終了するまでピン留めしたままにすることです。

問題は、トゥイーンが終了し、ビデオの再生中にシーンが効果的に終了するため、ピンが削除され、次のシーンにスクロールされることです。

ビデオの再生が終了するまでシーンを固定しておく最善の方法は何ですか? 私がここで達成しようとしていることの例はありますか?

私が試みた方向の 1 つは、ビデオの再生中に非常に多くの秒の遅延を伴う別のヌル トゥイーンを追加することです。それはいくらかのピン留めを提供しますが、ユーザーがスクロールし続け、再生中に高速である場合、ビデオがまだ完成していない状態で次のシーンにスクロールします...

誰かが最初の考えを持っているなら、それは素晴らしいことです. 私は方法を考えようとして行ったり来たりしてきましたが、エレガントな解決策を見つけることができません。

前もって感謝します、クレイグ

ここで最初の例のコードを実装しようとしています:

http://janpaepke.github.io/ScrollMagic/examples/advanced/parallax_scrolling.html

次のトゥイーンは機能します（ただし、すぐにトゥイーンします）...

次のコードを追加すると...

以下のエラーが表示されます。

Uncaught TypeError: (intermediate value).setTween is not a function

私はこれを理解しようとして夢中になっています。私は何を間違っていますか？

私はScrollmagicで遊んでいて、いくつかのことをうまく機能させることができました。私が今やろうとしているのは、ビューポートの下部にブログ用の粘着性のあるソーシャル共有バーを作成することです。コードに表示させるのに問題はありませんでした

これはHTMLです

「セクション テスト」を対象とする別の Tweenmax アニメーションを使用して共有バーをフェードアウトできることはわかっていますが、最初の JavaScript でこれを行うには、おそらくもっと良い方法があると考えました。別の方法はありますか、またはコンテンツ (div.entry) の終了後に共有バーを非表示にするために別の Tween を作成する必要がありますか。

Codepen http://codepen.io/anon/pen/aOWBQZ

GSAP と scrollMagic を使用して単純なタイムラインマックスを作成しようとしていますが、次のエラーが発生します。すべてが正しいように見えるので、このエラーを理解していません。

12行目は.to("#parallax1 > div", {y: "80%", ease: Linear.easeNone});以下です。

コードは次のとおりです。

(そのトゥイーンに期間パラメーターがないことは知っていますが、http: //janpaepke.github.io/ScrollMagic/examples/advanced/parallax_sections.html を見ると、setTween に期間パラメーターがなく、単に機能することがわかります大丈夫）。

視差とスクロールマジックを試しています。scrollmagic デモの視差の例では、最初の視差セクションでコンテンツをアニメーション化しようとしています。

これが私の実験のフィドルです。

思い通りに動けletter Aない。#boxバウンディング ボックスを追加して、それを triggerElement として使用しようとしましたが、うまくいきませんでした。

スクロールダウンすると、150px 下に移動してフェードアウトします。現在はそのまま使用"#parallax1"しており、triggerElementそのセクションの下部に到達するとフェードアウトします。そのセクションの一番下の前にフェードアウトしたい。どうすればそれを行うことができますか？

私は何を間違っていますか？