問題タブ [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 - スクロール マジック ピン留めと HTML 5 ビデオ タグ
Scroll Magic JSを使用しています。私の目標は、HTML5 ビデオ (以下) を取得し、pin メソッドを使用して背景に固定し、テキストがその上をスクロールすることです。
私のJavascript：
JavaScript を含めない場合、ビデオは完全に機能し (明らかにピン留めはしません)、ビデオの代わりに画像に JavaScript を使用すると、ピン留めは完全に機能します。
ビデオで JavaScript を使用すると、ビデオは引き続き表示され、固定されますが、再生されません。これを克服する方法を知っている人はいますか？
ありがとう
javascript - scrollTarget コールバック関数に他のパラメータを渡す方法はありますか?
私は ScrollMagic のドキュメントを見ていました。以下に示すように、コールバック関数を使用してスクロール動作を変更できることがわかりました。
この関数にさらにパラメータを渡す方法はありますか? 特定のリンク/アンカーについては、オフセットを使用したいと思います。より多くのパラメーターを渡す方法、またはコールバック内から ScrollTarget を取得する方法を理解できませんでした。
javascript - スクロールされた要素のクロス ディゾルブ トランジション
私は長い単一ページの Web サイトを作成し、ScrollMagicJS v1.3.0 を使用してイベントをトリガーし、いくつかの要素を固定します。ページを下にスクロールするときに、さまざまなトランジション効果を作成したいと考えています。
これは、私のサイトの水平スクロールを再現する jsfiddleです。
たとえば、ページ間のフェードからブラック、フレアからホワイト、クロス ディゾルブのトランジションを作成したいと考えています。
HTML5 トランジションの基本原則の一部、ある画像を別の画像に溶解させる方法は理解していますが、ScrollMagic スクロールを使用してそれを行う賢い方法を見つけることができませんでした。
私が検討したこと: 次のページが現在のページの下にスライドし、ScrollMagic トリガーを使用して不透明度 1.0 から 0 に移行しますか?
しかし、ハックではなく、ScrollMagic のフレームワークと一致する方法でそれを行うにはどうすればよいでしょうか?
animation - Modernizr で即時スクロール イベントのサポートを検出する方法は?
ScrollMagic を使用して、Web ページの各セクションでアニメーションをトリガーします。これは、デスクトップやモバイルの一部のブラウザーでうまく機能します。
ただし、スクロール イベントが終了するまでこれらのアニメーションを再生しないモバイル ブラウザー (旧バージョンの Safari および Chrome (ipad)) があります。私はそれを回避する方法があることを知っています。ただし、サポートされていない場合は、これらのアニメーションを単にオフにしたいと思います。
Modernizr でそれを検出する方法はありますか? または、特定のブラウザーとそのバージョンをターゲットにする必要がありますか?