javascript - ブラウザのスクロールバーを使用して画像の動きを制御する

Question

パスを介して画像をガイドしたい。ブラウザを下にスクロールすると、画像がパスを下に移動し、ブラウザを上にスクロールすると、画像がパスをトレースバックするようになります。

これが私が達成したいことの例です：

ユーザーがページ上の記事を下にスクロールするときにそのバグをパスに導き、ユーザーが上にスクロールするとパスをたどるようにします（バグの頭は常に動きの方向にあります）。

jQueryとjavascriptを使用してこれをどのように達成できますか？

Answer 1

使用するパスを計算してから、スクロールされた距離に基づいて画像を移動するスクロールイベントに関数をバインドする必要があります。

$(window).on('scroll', function(e) {
    var S = $(this).scrollTop(),                // scrolled distance
        T = 10 + (S/24),                        // value for Top
        L = 10 + Math.abs(Math.sin(S/400)*50);  // value for Left

    $("img").css({top: T+'%', left: L+'%'});    //set CSS
});​

フィドル

Answer 2

javascriptまたはjqueryだけでマウススクロールを直接キャプチャできるとは思いません。それはブラウザのwhats部分、および「ウィンドウ」内で機能するためです。ただし、スクロールイベントをキャプチャすることはできます。窓の高さ/幅に基づきます。すべての解像度のすべてのブラウザで機能する信頼性の高い/安定した方程式を構築するには、JavaScriptを介して少し計算する必要があります。あなたの質問はかなり曖昧であり、答えの要求のように聞こえる以上に解決すべき問題を提供しないという事実のために、ここではこれ以上詳細に立ち入るつもりはありません。

しかし、あなたがしたいと思うかもしれないことの本質は、窓/本体の幅/高さを取得することです。そして、煙と鏡、またはこの場合はHTMLとCSSのトリックを介して、レイヤーの束を互いに適切に配置することで、1マイルの長さのページを作成し、スクロールバーを非表示にして、その上に2つのレイヤーを配置します。 1つは「パス」として機能し、もう1つは画像として機能します。ポイントaからポイントbにスクロールすると、ページが1マイル下にあるというスクロールイベントによって追跡されます。次に、見つかった幅/高さと組み合わせて調整を行い、特定のポイントで画面からはみ出さないようにします（必要なものよりも少ない）。