2012-01-19 10 views
3

私は彼らが今まで成功していないhttp://artofflightmovie.com/でこれらの効果をどのようにしたのかを理解しようとしてきました。私は助けのために何をGoogleにしてもわからない。誰かがそれを打ち明かして、おそらく同じことをしているプラ​​グイン\ tutorials \ otherのウェブサイトへのリンクを置くことができますか?彼らはhttp://artofflightmovie.com/でこれらの効果をどのようにしましたか?

あり同様の質問が既にあるが、それは私に少し助けにはならなかった^^

+1

お気に入りのブラウザの開発者ツールを使用して、ページソースを確認します。 – Marcin

+3

ありがとう、cap'n – user1158010

答えて

6

ここでの回答のすべてが、これまでその場であり、実行のさまざまな部分をカバーしています。 jQueryに言及している人たちは、私たちの重い依存関係を正確に表しています:)

それでは、非線形に沿って動く他の概念おそらく最も困難な部分でした。文字通り、グラフ紙のように設定されたIllustratorファイルを使用して、スクロールバーから必要な動きを反映したベジェパスを描きました。次に、曲線を表現する直線の束(ダウンサンプリングオーディオ波形に似ています)に曲線を変換して、パフォーマンス/スピードを速くしてパスをダウンサンプリングしました。それらの座標をデザイナーに渡し、巨大なデザインファイルを作成し、指定された「停止」ポイントで各コンテンツセクションを文字通り設計しました。次に、パスに沿った各座標を、スクロール位置のパーセンテージ値にマッピングしました。これらの値をJavaScript配列に保存しました。最後に、サイトのコンテナの位置をずらす方法を決定するためにスクロール位置をパイプするJS関数をいくつか書きました。スクロール機能は、基本的にスクロールバーを強制するためにドキュメントの高さを設定する背の高いdivで処理されます。イベントをスクロールし、上記の機能を使用する場所にコンテナをスライドさせます。

視差効果は、位置オフセットのパーセンテージ(コンテナを移動するために使用するもの)を適用し、さまざまなコンテンツセクションのサブコンテナに適用することによって実現されます。これにより、サブコンテナはバックグラウンドよりも遅くまたは速く移動しますが、同じモーションパス上に移動します。

最後に、スノーボーダーとヘリコプター(いくつかのブラウザーではx、yの動きに加えてCSS3の回転を持つ!)は、 'start'と 'end'の位置の単純な配列を使用して配置され、スクロールパーセンテージ。

私はそれが本に変わるのを防ぐためにそれを残しておきますが、興味があれば具体的に詳しく説明します。

:私はサイトの開発者をリードしていました。私は自分の角をつけたり、そのようなものを投稿したりするのではなく、助けになり、仲間に助けを与えるだけです。私はここを掘り起こし、他の人から洞察力を得るためにたくさん来る。 (多くの方々、私たちを助けてくださった方々に感謝します!)また、恥知らずなプラグですが、この映画は息を呑むようなものです...まだ借りていなければ、あなたはごめんなさい。 :)

2

ページ全体が「オーバーレイ」である - 完全な幅と高ラッパー<div>。モーダルウィンドウが "フルページシャドウ"エフェクトを行い、内部に小さなdivフロートを持つ様子の一種。ページ全体の内容はそのラッパーにあります。スクロールパスはスクリプトです。スクリプトは本体のスクロールをキャプチャし、それに応じてdivの内容をスクリプトが提供する位置に移動します。 (ラッパーがページ全体をカバーしているために見えない)スクロール可能なボディで、それは横向き、上向きなどのようにスクロールしているかのようです。

類似はモーダルウィンドウです。ラッパーはフルページシェードです。モーダルウィンドウは内容です。モーダルウィンドウが中央にいかに固執するのか気づくでしょうか?これは、スクリプトを使用して、モーダルウィンドウをページの上部に相対的に下に動かすことによって、その中央に留まる位置を計算しています。そのウェブサイトのケースでは、彼らは異なる方向に移動します。

2

複雑すぎるとは思われません。

jQueryで.scroll(function() {})を使用すると、スクロールイベントを待機します。トリガーすると、コンテンツの位置スタイル(左、上)をdivに設定して、下方向でなく横方向に表示されるようにします。

divにはoverflow:noneのプロパティが必要なので、ユーザーが表示したくない領域をスクロールしないようにする必要があります。

私の意見では、厄介なユーザーインターフェイスのための多くの努力が好きです。

+0

は横向きに動くだけでなく、下にスクロールしても上に移動します。素晴らしいウェブサイト! – Joseph

+0

'left'と' top' CSSを使って好きな場所に移動することができます。 – Jivings

4

かなりクールなウェブサイトです。基本的には人がスクロールしたどこまで検出することができますjavascriptの一部を使用して)

。スクロールの量を考慮すると、あなたの位置が絶対的な場合、あなたのウェブページのコンテンツを移動することができます。

simular stuffを実行できるようにするjQueryプラグインがいくつかありますが、座標シーケンスを「スクロール」できるかどうかはわかりません。ここで

あなたはまねた効果を得ることができますjQueryのプラグインのカップルです:

私はちょうど私が」カップルを選びましたよく知っているが、多くのプラグインがある似ている。

編集:

はあなたの喜びのためにいくつかのより多くのまねのウェブサイトを追加することにしました。

+0

+1の_scrollTo_とサンプルリストのコンパイル – andyb

関連する問題