問題タブ [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.
jquery - 複雑な ScrollMagic コードの管理
私は ScrollMagic が初めてで、物事を理解しようとしています。非常に複雑なアニメーションを含むサイトで作業していますが、効果的な ScrollMagic コードを作成するためのチュートリアルや例は見つかりませんでした。
私はプログラマーではなく、jQuery と JavaScript の基本的な知識しかありません。
この時点で次のコードがあります (少し面倒だと思います)。
これをより簡単な方法で管理する方法についてのヒントをお待ちしています。
別のドキュメント対応関数が必要かどうかはわかりませんでしたが、同じ変数を宣言するのは別の関数でのみ機能するはずだと推測していました (申し訳ありませんが、JavaScript / jQuery の知識が不足しています)。
複数のシーンとトゥイーンを管理するための、より短時間で効果的な方法はありますか? どんなヒントでも大歓迎です!
javascript - Scroll Magic を使用した Simple Tween ローカル コピーが機能しない
良い一日!
scrollmagic.js を使用して、この単純なトゥイーンの例を作成しようとしています。ええ、それはjsfiddleで動作します。確かに、scene.addIndicators() を配置して、開始、終了、およびトリガー フックを確認します。それはきれいに動作します。jsfiddle でわかるように:
コンテナーとスペーサーの高さを任意の大きな値に変更してみましたが、トリガー フックは中央にあります。それは良い。Sublime を使用してローカルにコピーを作成してみました。しかし、今私の問題は、スペーサーまたは大きな値を設定すると、ページの下部にトリガー フックが表示されることです。これにより、トゥイーン アニメーションが表示されなくなります。この問題に遭遇した人はいますか?jsfiddle で動作するため、ローカルのセットアップに問題があると思います。これについては、scrollmagic の寄稿者に既に尋ねています。なぜこれが起こるのですか?
前もって感謝します。
javascript - 前のトゥイーンの完了後にトゥイーンを開始します。- Greensock / ScrollMagic
GreenSock / ScrollMagic JS を使用して、ページ上の div をアニメーション化しようとしています。最初のトゥイーンが完了した後、アニメーション ボックスで 2 番目のアニメーションを起動したいと考えています。ボックスを下に 300px 移動し、次に左に 300px 移動します。トゥイーンシーケンスを追加するにはどうすればよいですか。これのための私のコードペンは -
http://codepen.io/anon/pen/HfFwJ
私が使用しているJSは -
私のHTMLの構造 -
簡単に言えば、スライドドスをアニメーション化して、完了した後に left:300px を top:300px に追加したいと考えています。
どんな助けでも大歓迎です!:)
DIM3NSION
javascript - ScrollMagic.js を AMD モジュールとして使用する
たとえば、優れたScrollMagic JS プラグインを AMD モジュールとして使用するにはどうすればよいrequirejs
でしょうか?
そのオンラインへの参照が見つかりませんでした。そのコードを見るとScrollMagic
、AMD モジュールとしてロードされているようには見えません。
window
モジュールの最後のレベルで2 つの変数を定義します。
2 つの変数をエクスポートする必要があるため、単純な方法でshim
はうまくいかないようです。それをエクスポートする方法はありますか?
何か案は?
ありがとう!
javascript - ScrollMagic は、サイズ変更時に div の高さを考慮しません
私はスクロールマジックを使用してウェブサイトに取り組んでいます。問題は、ウィンドウのサイズを変更すると、セクションピンの高さが失われ、残りのコンテンツが非表示になるように見えることです。
最初にロードされるものに関するエラーである可能性があると思います
ここに私のサイトhttp://eloisemonteiro.hol.es/
、
ここにも入れましたが、スクロールマジックが機能していないようです:
http://jsfiddle.net/5k2p88o3/
jquery - ScrollMagic ピンと表示の問題
写真を一時停止しようとしています。少しスクロールすると、画像 (part1) がフェードアウトし、下にある画像が表示されます。さらにスクロールすると、両方ともスクロールアウトするはずです。
http://janpaepke.github.io/ScrollMagicを使用していますが、ピン留めとアニメーションの組み合わせが機能しません。
jquery - Tweenmax は、ScrollMagic を待たずにアニメーションを開始します
scrollmagic で TweenMax アニメーションをトリガーしようとしていますが、スクロール トリガーがヒットするのを待たずにアニメーションが開始されます。ここで何か不足していますか?
javascript - ScrollMagic を使用してテキストをフェードする
ここに私のマークアップがあります:
これが私のJavaScript(CoffeeScript)です:
今のところ、アニメーションは何もしません (私はScrollMagic()
初心者です)。スクロールすると最初のセクションのテキストがフェードアウトし、次のセクションをスクロールするとコンテンツがフェードインするという効果を実現したいと思っています。
視差と無知ですみません、ScrollMagic()
私は視差の完全な初心者です
javascript - ウィンドウ サイズに基づいて条件付きで固定された DIV
画面が特定の幅の場合に DIV を修正するスクリプトを作成しようとしています。これは私がこれまでに持っているものですが、ロジックが正しくなく、書き方がわかりません。
http://jsfiddle.net/gtowle/jxoewzoo/
私が目指しているロジックは次のとおりです。
- ページの読み込み時に、ウィンドウの幅が 500 より大きい場合は、A を実行します。そうでない場合は、何もしません。
- ウィンドウのサイズ変更で、ウィンドウ幅が 500 未満になった場合は B を実行し、640 を超えた場合は A を実行します。
私の問題は、ウィンドウのサイズが変更されたときに#2をトリガーする方法がわからないことだと思います。
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.