0

私は単一ページのWebサイトで作業しており、スクロールで動的な背景アニメーションを作成しようとしています。私のウェブサイトに4つの異なるセクションがあるとしましょう。セクションごとに、私は異なる背景を持っています。

jQueryを使用して、使用されているスクロールのパーセンテージを取得することができました。それで、私のセクションのそれぞれが25％の間隔であるとしましょう（完全に真実ではありませんが、これは私が達成しようとしていることを描写するためだけです...）。したがって、0〜25％のbackgroundA、25〜50％のbackgroundB、50〜75％のbackgroundC、および75〜100％のbackgroundDです。

背景は似ていますが、卓球ボールのように、ウェブサイトの両側でリバウンドします。アイコンも変更されるため、たとえば、最初の背景は左側が100px x 100pxの家の画像で、2番目の背景は右側が100pxx100pxの虫眼鏡画像である可能性があります。

さて、私がやりたいのは、背景の間にある種の「流動性」を作ることです。そのため、backgroundAが徐々にbackgroundBに変化しているように見えます。

私はいくつかのウェブサイトでこの種の振る舞いを見たことがあるので、それが可能であるとかなり確信しています...しかし、それを行う方法はよくわかりません。

さらに詳しい説明が必要な場合は、お知らせください。

ありがとう ！:)

4

2 に答える 2

1

スクロール イベントをキャプチャし、それに応じて要素を変換します。

$(window).scroll(function(){
    var doc_h = $('body').height()-window.innerHeight;
    var scroll_y = window.scrollY;
    var sc_p = scroll_y/doc_h;

    $('#some-element').css({'bottom':50+sc_p*20+'px'});
});

実際の機能は、実際に何をしたいかによって異なりますが、基本的には、スクロール バーの位置を計算してから、いくつかの要素のプロパティを変更するだけです。

あなたの例のリボンは、ページがスクロールすると成長する width = 0 の 4 つの div のセットであり、最後の div は高さとともに成長します。キャプチャすればいいだけ

于 2012-12-11T16:36:04.250 に答える
1

OPに与えられた例では、探している可能性のある方法は、背景画像を垂直にわずかに重ねて（行が互いに重なり合っているように見える場所）、scrollTopの位置に基づいて、それぞれで「ステップ」関数がトリガーされることですこれらの背景の幅をアニメーション化します (bg.js というページのスクリプトを確認してください)。各「ステップ」内で、これらの関数は、数式 (scrollTop * (heightCurrentBg - currentWidth) など) に基づいて背景画像の幅を変更します。フロントエンドでは、これらすべてが 1 つのように見えます。流体ラインが前後に移動/跳ね返ります。

編集- スクロール位置を使用してページ上の要素を操作する限り、トップ ナビゲーションのフローティング要素について、私が作成した例を次に示します - http://jsfiddle.net/jmsessink/MyL6Y/2/

すべての魔法は数学で起こることに注意してください -

page.$window.scrollTop() / (page.bodyHeight - page.windowHeight) * (page.navWidth - page.navDivWidth);

うまくいけば、それがあなたのプロジェクトの良いスタートになるでしょう。

編集＃2-これは、あなたがやろうとしていることをコーディングする方法の例です（背景色を斜めの線の背景画像に置き換えるだけです）- http://jsfiddle.net/jmsessink/MyL6Y/3/

于 2012-12-11T16:42:35.160 に答える