javascript - 背景画像がページ コンテンツとは異なる速度でスクロールする効果を作成する

Question

https://www.spotify.com/us/のようなエフェクトを作成する方法を教えてください。このページの [詳細] をクリックしてください。

3D効果のように見えます。例: スクロールほど画像が動かない。ページに 2 つの段落があり、第 1 段落の下に第 2 段落がある場合、第 2 段落は第 1 段落よりも早く移動します。

これらの効果をどのように作成できるか、またはJqueryプラグインの場合は、それも行うガイドラインがあります。

ありがとう！

Answer 1

リンクした効果は、「視差スクロール」として知られています。これを実装する方法を説明する多数の Web サイトとプラグインがあります。

• http://jonraasch.com/blog/scrolling-parallax-jquery-plugin
• http://abduzeedo.com/super-easy-parallax-effect-jquery
• http://www.impressivewebs.com/parallax-scrolling-scripts-plugins/

Answer 2

それがパララックス効果で、

視差は、2 つの異なる視線に沿って見たオブジェクトの見かけの位置の変位または差であり、これらの 2 つの線の間の傾斜角または半角によって測定されます。異なる位置から観察すると、近くの物体は遠くの物体よりも視差が大きくなるため、視差を使用して距離を決定できます。

このサイト とプラグインを確認してください

Answer 3

私は自分のサイトで非常に基本的な視差効果を作成しました。

$(window).scroll(
    function() {
        x = $("html").scrollTop() * -.05;
        $(".bg_img").animate({top: x + "px"}, 0);
}); 

これを自由に使用してください。私はいつでも提案を受け付けています。