問題タブ [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 に答える
6393 参照

jquery - 複雑な ScrollMagic コードの管理

私は ScrollMagic が初めてで、物事を理解しようとしています。非常に複雑なアニメーションを含むサイトで作業していますが、効果的な ScrollMagic コードを作成するためのチュートリアルや例は見つかりませんでした。

私はプログラマーではなく、jQuery と JavaScript の基本的な知識しかありません。

この時点で次のコードがあります (少し面倒だと思います)。

これをより簡単な方法で管理する方法についてのヒントをお待ちしています。

別のドキュメント対応関数が必要かどうかはわかりませんでしたが、同じ変数を宣言するのは別の関数でのみ機能するはずだと推測していました (申し訳ありませんが、JavaScript / jQuery の知識が不足しています)。

複数のシーンとトゥイーンを管理するための、より短時間で効果的な方法はありますか? どんなヒントでも大歓迎です!

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

javascript - Scroll Magic を使用した Simple Tween ローカル コピーが機能しない

良い一日!

scrollmagic.js を使用して、この単純なトゥイーンの例を作成しようとしています。ええ、それはjsfiddleで動作します。確かに、scene.addIndicators() を配置して、開始、終了、およびトリガー フックを確認します。それはきれいに動作します。jsfiddle でわかるように:

コンテナーとスペーサーの高さを任意の大きな値に変更してみましたが、トリガー フックは中央にあります。それは良い。Sublime を使用してローカルにコピーを作成してみました。しかし、今私の問題は、スペーサーまたは大きな値を設定すると、ページの下部にトリガー フックが表示されることです。これにより、トゥイーン アニメーションが表示されなくなります。この問題に遭遇した人はいますか?jsfiddle で動作するため、ローカルのセットアップに問題があると思います。これについては、scrollmagic の寄稿者に既に尋ねています。なぜこれが起こるのですか?

前もって感謝します。

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

javascript - 前のトゥイーンの完了後にトゥイーンを開始します。- Greensock / ScrollMagic

GreenSock / ScrollMagic JS を使用して、ページ上の div をアニメーション化しようとしています。最初のトゥイーンが完了した後、アニメーション ボックスで 2 番目のアニメーションを起動したいと考えています。ボックスを下に 300px 移動し、次に左に 300px 移動します。トゥイーンシーケンスを追加するにはどうすればよいですか。これのための私のコードペンは -

http://codepen.io/anon/pen/HfFwJ

私が使用しているJSは -

私のHTMLの構造 -

簡単に言えば、スライドドスをアニメーション化して、完了した後に left:300px を top:300px に追加したいと考えています。

どんな助けでも大歓迎です!:)

DIM3NSION

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

javascript - ScrollMagic.js を AMD モジュールとして使用する

たとえば、優れたScrollMagic JS プラグインを AMD モジュールとして使用するにはどうすればよいrequirejsでしょうか?

そのオンラインへの参照が見つかりませんでした。そのコードを見るとScrollMagic、AMD モジュールとしてロードされているようには見えません。

windowモジュールの最後のレベルで2 つの変数を定義します。

2 つの変数をエクスポートする必要があるため、単純な方法でshimはうまくいかないようです。それをエクスポートする方法はありますか?

何か案は?

ありがとう!

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

javascript - ScrollMagic は、サイズ変更時に div の高さを考慮しません

私はスクロールマジックを使用してウェブサイトに取り組んでいます。問題は、ウィンドウのサイズを変更すると、セクションピンの高さが失われ、残りのコンテンツが非表示になるように見えることです。

最初にロードされるものに関するエラーである可能性があると思います

ここに私のサイトhttp://eloisemonteiro.hol.es/

ここにも入れましたが、スクロールマジックが機能していないようです:

http://jsfiddle.net/5k2p88o3/

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

jquery - ScrollMagic ピンと表示の問題

写真を一時停止しようとしています。少しスクロールすると、画像 (part1) がフェードアウトし、下にある画像が表示されます。さらにスクロールすると、両方ともスクロールアウトするはずです。

http://janpaepke.github.io/ScrollMagicを使用していますが、ピン留めとアニメーションの組み合わせが機能しません。

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

jquery - Tweenmax は、ScrollMagic を待たずにアニメーションを開始します

scrollmagic で TweenMax アニメーションをトリガーしようとしていますが、スクロール トリガーがヒットするのを待たずにアニメーションが開始されます。ここで何か不足していますか?

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

javascript - ScrollMagic を使用してテキストをフェードする

ここに私のマークアップがあります:

これが私のJavaScript(CoffeeScript)です:

今のところ、アニメーションは何もしません (私はScrollMagic()初心者です)。スクロールすると最初のセクションのテキストがフェードアウトし、次のセクションをスクロールするとコンテンツがフェードインするという効果を実現したいと思っています。

視差と無知ですみません、ScrollMagic()私は視差の完全な初心者です

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

javascript - ウィンドウ サイズに基づいて条件付きで固定された DIV

画面が特定の幅の場合に DIV を修正するスクリプトを作成しようとしています。これは私がこれまでに持っているものですが、ロジックが正しくなく、書き方がわかりません。

http://jsfiddle.net/gtowle/jxoewzoo/

私が目指しているロジックは次のとおりです。

  1. ページの読み込み時に、ウィンドウの幅が 500 より大きい場合は、A を実行します。そうでない場合は、何もしません。
  2. ウィンドウのサイズ変更で、ウィンドウ幅が 500 未満になった場合は B を実行し、640 を超えた場合は A を実行します。

私の問題は、ウィンドウのサイズが変更されたときに#2をトリガーする方法がわからないことだと思います。

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

iscroll - コンテンツの高さが 100% の場合、IScroll が機能しませんか?

I'm using IScroll on a page that makes heavy use of ScrollMagic, but cannot for the life of me get IScroll to function. The primary issue appears to be that most (but not all) of the elements in the page need to take up 100% of the viewport's height, since they are set up as slides with some complex animations inside of them. In order for height: 100% to work, however, all the parent elements must be set the same. This is causing IScroll to calculate the height of the wrapper element at the viewport height, and thus it thinks there's no more content beyond that. I'm working on a jsfiddle to test/demonstrate the problem, but wondered if anyone else had run into a similar situation before.