scrollmagic.js の経験がある人からの助けが必要です

私はこれに似たものを作成しようとしています: http://work.antonandirene.com/karimrashid/

ページをスクロールするとセクションが重なる場所。

スクロールマジックを使用しています ( http://scrollmagic.io/ )

フィドル: http://jsfiddle.net/st86x71m/1/

私が抱えていた主な問題は、次のパネルが表示される前に、100% を超えるコンテンツをスクロールできるようにすることでした。これでだいぶ治りましたが、問題が…。

私の問題:

追加のコンテンツがスクロールを終了した後にギャップを削除する必要があります。これにより、追加のコンテンツが現在のように -100% ではなく、親の一番下にあるときに次のパネルが表示されます。

また、前のスライドの z-index が高くなるように、z-index を動的に設定する方法を理解する必要があります。現在、CSSで手動で設定しています。

どんな助けでも大歓迎です、

よろしくお願いします。ジョン。

質問

clip-maskJavaScript や jQueryを使用するのと同様に、グラデーションでコンテンツをフェードアウトする方法はありますか?

問題

背景が透明な固定ヘッダーと、透明な部分を持つ「.png」ロゴがあります。ページを垂直にスクロールする半透明の要素があり、ヘッダーとロゴの下にあります。

ロゴの下をスクロールすると、ロゴが透けて見え、すべてがかなり悪く見えます。

提案されたソリューション

特定のポイント (ヘッダーの下部) より上のコンテンツをフェードアウトさせたいと考えています。GSAPでScrollMagicを使用して、要素がスクロールするときに要素をアニメーション化し、他の CSS 修正との競合を引き起こすclip-pathため、JavaScript/jQuery の修正を最も可能性が高いものとして探しています。

サンプルコード

コメンターのリクエストで、いくつかのピースを含む JSFiddle を作成しました。

考慮すべき要素が 2 つあり#mastheadます#content。不透明度から へのグラデーションとしてフェードしたい下の領域 ( 内blue)があります。#masthead#content10

https://jsfiddle.net/dotzak/o9hcnufe/3/

100vh x 100vw の 6 つの絶対配置 div を含む 100vh x 100vw の固定コンテナーがあります。

各シーンをトリガーするために、100vh の 6 つの div で相対的に配置されたダミー要素を使用します。

ウィンドウのサイズを変更すると、シーンのアニメーションが前後に移動します。それが起こらないようにする方法はありますか？

プログレスバーを表示する必要があるサイトで scrollMagic ライブラリを使用しています。バーには、ページ上のユーザーの位置が表示されます。プログレス バーの幅は、ユーザーが上下にスクロールすると変化します。scrollMagic ライブラリで動作させることができないようです。これは私がとりわけ試したことです。ありがとう！

私が取り組んでいる 1 ページのスクロール Web サイトがあります。ScrollMagic を実装し、最初のセクションを固定して、ウェブサイトの残りのセクションが固定されたセクションの上にスクロールするようにしようとしています。問題を表示するためにjsfiddleを作成しようとしましたが、jsfiddleが機能していないようです（初めてfiddleを使用したため、何かが正しくリンクされていない可能性があります.fiddleへのリンク...

これが機能するようになった後、スクロール マジックに関してフォローアップ/新しい質問がありますが、私の問題をフィドルで示すことができれば役立つと思います。

Three.js と ScrollMagic を OO Javascript と組み合わせて個人の Web サイトを開発しています。ユーザーがスクロールすると、3d オブジェクトが変換されます。これはすべてうまく機能しますが、わずかなパフォーマンスの問題があります。これを改善するために、位置を計算するいくつかのループ/関数を Web ワーカーに移動したいと考えています (ループ関数を呼び出すたびにスクロールが遅れます)。

問題は、クラス インスタンス (THREE.PointCloud) の配列 (512) を Web ワーカーに渡そうとしていることです。Web ワーカーのこれらのインスタンスから、意味のある完全なプロパティを取得できないようです。

まず、配列をワーカーに渡そうとしたところ、「Uncaught DataCloneError: Failed to execute 'postMessage' on 'Worker': An object could not be cloned.」というエラーが発生しました。

その後、これができないことに気付いたので、JSON.stringify() と JSON.Parse() を使用しました。配列の長さを取得できました。ただし、各インスタンスのプロパティを取得できませんでした。

ArrayBuffer を使用する必要があると思いますか? しかし、インスタンスの配列を ArrayBuffer に変換する方法がわかりません。誰？または、パフォーマンスを向上させる簡単な方法はありますか?

助けていただければ幸いです。

ありがとう。

このScrollMagic Demoの仕組みを理解しようとしています。デモから使用しているコードは次のとおりです。

ScrollMagicはGSAPを使用しているという印象を受けましたが、この ScrollMagic の方法にはあまり詳しくありません。.setTween()

以下は、私が完全に理解できないことの一部です。

• duration：現在は に設定されてい200%ます。これは、ページのスクロールに関してアニメーションが完了するまでにかかる時間ですか?
• .setTween(): 最初のパラメーターは html セレクターですが、クラスを使用すると壊れてしまうようです。2 番目のパラメーターはy位置です。しかし、このパラメーターはロード時にコンテンツをオフセットするために使用されますか? つまり、#workセクションは-80%ロード時にオフセットに設定されますか?

ドキュメントを調べてこのことを理解しようとしましたが、ここでは別の方法を使用しているようです。私は単純な視差効果を探しています。