ここでの回答のすべてが、これまでその場であり、実行のさまざまな部分をカバーしています。 jQueryに言及している人たちは、私たちの重い依存関係を正確に表しています:)
それでは、非線形に沿って動く他の概念おそらく最も困難な部分でした。文字通り、グラフ紙のように設定されたIllustratorファイルを使用して、スクロールバーから必要な動きを反映したベジェパスを描きました。次に、曲線を表現する直線の束(ダウンサンプリングオーディオ波形に似ています)に曲線を変換して、パフォーマンス/スピードを速くしてパスをダウンサンプリングしました。それらの座標をデザイナーに渡し、巨大なデザインファイルを作成し、指定された「停止」ポイントで各コンテンツセクションを文字通り設計しました。次に、パスに沿った各座標を、スクロール位置のパーセンテージ値にマッピングしました。これらの値をJavaScript配列に保存しました。最後に、サイトのコンテナの位置をずらす方法を決定するためにスクロール位置をパイプするJS関数をいくつか書きました。スクロール機能は、基本的にスクロールバーを強制するためにドキュメントの高さを設定する背の高いdivで処理されます。イベントをスクロールし、上記の機能を使用する場所にコンテナをスライドさせます。
視差効果は、位置オフセットのパーセンテージ(コンテナを移動するために使用するもの)を適用し、さまざまなコンテンツセクションのサブコンテナに適用することによって実現されます。これにより、サブコンテナはバックグラウンドよりも遅くまたは速く移動しますが、同じモーションパス上に移動します。
最後に、スノーボーダーとヘリコプター(いくつかのブラウザーではx、yの動きに加えてCSS3の回転を持つ!)は、 'start'と 'end'の位置の単純な配列を使用して配置され、スクロールパーセンテージ。
私はそれが本に変わるのを防ぐためにそれを残しておきますが、興味があれば具体的に詳しく説明します。
:私はサイトの開発者をリードしていました。私は自分の角をつけたり、そのようなものを投稿したりするのではなく、助けになり、仲間に助けを与えるだけです。私はここを掘り起こし、他の人から洞察力を得るためにたくさん来る。 (多くの方々、私たちを助けてくださった方々に感謝します!)また、恥知らずなプラグですが、この映画は息を呑むようなものです...まだ借りていなければ、あなたはごめんなさい。 :)
お気に入りのブラウザの開発者ツールを使用して、ページソースを確認します。 – Marcin
ありがとう、cap'n – user1158010