2

これは私の最初の投稿であり、完璧に配置されていない場合はお詫びします。

基本的に、Red Bull Art of Flight 映画の Web サイトで見事に利用されているものと同じまたは類似の効果を達成しようとしています。

http://artofflightmovie.com/

つまり、ユーザーがページを下にスクロールすると、背景画像が座標のパスに沿って移動します。現時点では、コンテンツのアニメーションについて心配する必要はありません。背景のアニメーションだけです。

基本的なことはできますが、背景を a から b アニメーションに移動できますが、b から c、c から d などに移動したい場合はどうすればよいかわかりません。

公開されているものを使用してみました:

$('.bg').scroll(function(){
   var x = $(this).scrollTop();
   $(this).css('background-position','0% '+parseInt(-x/10)+'px');
});

これにより、ユーザーがスクロールしたときに背景位置の変更を設定できますが、次のアニメーションをどのように設定するかわかりません。私の最初の考えは、else if を使用することでしたが、これは成功しませんでした。

artofflightmovie.com の例では、バックグラウンド位置の px 測定値の配列を設定し、タイムラインのように読み取ります。

CSS をどうしたいかは問題ありませんが、jQuery に関する私の知識は、私が抱えている問題を克服できるレベルに達していません。

また、Art Of Flight ページのソースを取得し、簡略化されたバージョンを作成して構築しようとしましたが、これもあまり役に立ちませんでした.

任意の助けをいただければ幸いです

4

1 に答える 1

2

入力してくれてありがとう。

私は実際に私が求めていたものをここで見つけました: http://joelb.me/scrollpath/

キャンバス要素を使用してパスをレンダリングし、jQuery がそれに沿ってスクロールを制御する優れた jQuery プラグイン。イベント/機能は、すべてのウェイポイントでトリガーすることもできます。

于 2012-03-01T16:17:00.797 に答える