問題タブ [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.
javascript - Scrollmagic を使用したテキスト ボックスの不透明度のトゥイーン
疑似視差サイトを作ろうとしています。Scrollmagic jquery プラグインを使用しています。バックグラウンド アニメーションは正常に動作していますが、最初のテキスト ボックス (灰色のバーにある) に問題があります。opacity:1 から開始し、tween を opacity:0 に設定しました。ページを読み込むと、div コンテナーの不透明度が既に .5 に設定されているようです。私は何を間違っていますか?TweenMax.to のデュレーションを .5 に調整してみましたが、.text-background のトゥイーンに違いは見られませんでした。
codepen はこちらから入手できます: http://codepen.io/anon/pen/vExZPR
ありがとうございました。
javascript - tweenmax アニメーションは読み取り専用プロパティ '_gsTweenID' に割り当てることができません
スクロール中にスクロールマジックを使用してオブジェクトをアニメーション化していますが、次のエラーが発生します。
不明な TypeError: #design-principles の読み取り専用プロパティ '_gsTweenID' に割り当てることができません
私のJSコード:
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 :
javascript - ScrollMagic を使用して複数のシーンを連続してアニメーション化する
ScrollMagic と GSAP を使用してこのイントロ効果を再構築しようとしています: http://airnauts.comスクロールすると、イントロの「スライド」(テキスト付き) が次々に表示されたり消えたりすることに注意してください。
基本的に、ステージ コントローラー、シーン (含まれる div - '.hero-unit')、およびアニメーション用のいくつかのトゥイーンをセットアップしました。ただし、各スライド (合計 3 つ) を次のような順序でアニメーション化する方法がわかりません。
- ウェブサイトに入り、スクロールを開始します。
- 最初のスライドは (staggerFromTo メソッドを使用して) アニメーション化されます。
- スライドが完全にアニメーション化されたら、不透明度を 0 に戻します (または画面の外に移動するなど)。
- 2 のように、2 番目のスライドを表示します。
- 3.などと同じ。
インターネットで解決策として見つけたものはすべて試しました。「TimelineMax」を使用してみましたが、onComplete でアニメーション化が完了したらスライドを非表示にしようとしましたが、何も機能していないようです。これまでのコードは次のとおりです。
要約すると、スクロール中にさまざまなシーンをステージングし、それらの間を適切に切り替えるにはどうすればよいでしょうか??
javascript - さまざまな ScrollMagic シーンでトゥイーンを再利用する
私はscrollmagicを初めて使用し、コードの繰り返しを避けるために、異なるトリガーで同じトゥイーンを使用したいと考えています。例えば:
しかし、最後の2つのシーンだけが機能します。それを機能させるには、各シーンでトゥイーンを繰り返す必要があります。再利用可能なトゥイーンを作成することは可能ですか?
jquery - Scrollmagic: シーン内でのページのスクロールを防止
ページの効果に scrollmagic を使用したいと考えています。私のスクロールシーンが定義され、動作します。シーンが終了していない間、ページのスクロールを停止させたいと思います。
シーンをコンテナに入れようとしましたoverflow-y: scroll;
が、Firefox ではうまく動作しませんでした。(そのセクションをクリックする必要があったので、スクロールしてください。)
シーンが完成していない間、ページ全体のスクロールを無効にすることは可能ですか?