問題タブ [scrollmagic]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票する
1 に答える
3444 参照

javascript - Scrollmagic を使用したテキスト ボックスの不透明度のトゥイーン

疑似視差サイトを作ろうとしています。Scrollmagic jquery プラグインを使用しています。バックグラウンド アニメーションは正常に動作していますが、最初のテキスト ボックス (灰色のバーにある) に問題があります。opacity:1 から開始し、tween を opacity:0 に設定しました。ページを読み込むと、div コンテナーの不透明度が既に .5 に設定されているようです。私は何を間違っていますか?TweenMax.to のデュレーションを .5 に調整してみましたが、.text-background のトゥイーンに違いは見られませんでした。

codepen はこちらから入手できます: http://codepen.io/anon/pen/vExZPR

ありがとうございました。

0 投票する
2 に答える
1488 参照

javascript - tweenmax アニメーションは読み取り専用プロパティ '_gsTweenID' に割り当てることができません

スクロール中にスクロールマジックを使用してオブジェクトをアニメーション化していますが、次のエラーが発生します。

不明な TypeError: #design-principles の読み取り専用プロパティ '_gsTweenID' に割り当てることができません

私のJSコード:

0 投票する
0 に答える
508 参照

javascript - fullpage.js および scrollmagic で requirejs を使用しているときに、ランダムなサファリがクラッシュする

use-initボイラープレートに基づいて、requirejsで動作するWebサイトを取得しようとしています。ほとんどのシステムとほとんどのブラウザーで問題なく動作します。ただし、ランダムなシステム バージョン (iMac、MBP) およびランダムな Safari バージョン (Safari 6、7、および 8 で発生) の Safari では、('scrollmagic'、'fullpage.js' およびその他のスクリプトと組み合わせて) 失敗します。この場合、ブラウザーはいくつかの要素を表示しただけで、スクロール中に苦労し、時間の経過とともにクラッシュしました。

更新:非圧縮のテスト済みデバイスでは機能しますが、ビルド バージョン (r.js) では機能しません

この動作の理由はわかりませんが、すべての間違いを見つけようとしています。間違った動作が私の知識不足によるものなのか、完全に間違ったことをしたのか、または使用したツールのいずれかにバグがあるのか​​どうかはわかりません。そこでお聞きしたいのですが、何かヒントはありますか?

requirejs でのプラグインの正しい実装についてはわかりません。「scrollmagic」は適切に使用できたと思いますが、「fullpage.js」についてはよくわかりません。「fullpage.js」のモジュールのような使い方を書くことは可能ですか、それとも以下の詳細に従って使用権がありますか? 初めてすべてのものを使用するので、すでにドキュメントを調べました。助けていただければ幸いです。

よろしく
ヤコブ
—<br> http://jakob.grommas.com/bt/
http://jakob.grommas.com/bt-raw/

何か間違ったことをした場合に備えて、ここでは構成、メイン、およびモジュールの詳細なストリップを示します。

config.js :

main.js :

modules/fullpage.js :

modules/scrollmagic.controller.js :

modules/scrollmagic.scene.js :

0 投票する
2 に答える
9423 参照

javascript - ScrollMagic を使用して複数のシーンを連続してアニメーション化する

ScrollMagic と GSAP を使用してこのイントロ効果を再構築しようとしています: http://airnauts.comスクロールすると、イントロの「スライド」(テキスト付き) が次々に表示されたり消えたりすることに注意してください。

基本的に、ステージ コントローラー、シーン (含まれる div - '.hero-unit')、およびアニメーション用のいくつかのトゥイーンをセットアップしました。ただし、各スライド (合計 3 つ) を次のような順序でアニメーション化する方法がわかりません。

  1. ウェブサイトに入り、スクロールを開始します。
  2. 最初のスライドは (staggerFromTo メソッドを使用して) アニメーション化されます。
  3. スライドが完全にアニメーション化されたら、不透明度を 0 に戻します (または画面の外に移動するなど)。
  4. 2 のように、2 番目のスライドを表示します。
  5. 3.などと同じ。

インターネットで解決策として見つけたものはすべて試しました。「TimelineMax」を使用してみましたが、onComplete でアニメーション化が完了したらスライドを非表示にしようとしましたが、何も機能していないようです。これまでのコードは次のとおりです。

要約すると、スクロール中にさまざまなシーンをステージングし、それらの間を適切に切り替えるにはどうすればよいでしょうか??

0 投票する
1 に答える
2223 参照

javascript - さまざまな ScrollMagic シーンでトゥイーンを再利用する

私はscrollmagicを初めて使用し、コードの繰り返しを避けるために、異なるトリガーで同じトゥイーンを使用したいと考えています。例えば:

しかし、最後の2つのシーンだけが機能します。それを機能させるには、各シーンでトゥイーンを繰り返す必要があります。再利用可能なトゥイーンを作成することは可能ですか?

0 投票する
1 に答える
5440 参照

jquery - Scrollmagic: シーン内でのページのスクロールを防止

ページの効果に scrollmagic を使用したいと考えています。私のスクロールシーンが定義され、動作します。シーンが終了していない間、ページのスクロールを停止させたいと思います。

シーンをコンテナに入れようとしましたoverflow-y: scroll;が、Firefox ではうまく動作しませんでした。(そのセクションをクリックする必要があったので、スクロールしてください。)

シーンが完成していない間、ページ全体のスクロールを無効にすることは可能ですか?