背景画像のスクロール速度を上げる方法は？

背景画像が上の要素より速くスクロールしなければならない単純な視差効果を実現したい。どのように私はJQueryでこれを達成することができますかJavaScriptを使用して？背景画像のスクロール速度を上げる方法は？

2016-08-07 Altair827

greensockを、それはボンネットの下のcss（GPU）を利用し、このための素晴らしいライブラリです。 Googleのプロダクトプロモーションページやその他のサイトなど、巨大なウェブサイトで使用されています。それは素晴らしいです。 –

その素晴らしい図書館です。しかし、どのプラグインを使うのか分からなかった。 – Altair827

あなたは私がpreview.zipstory.comで行ったことを模倣することができます。ソースを表示 –

ページスクロールの現在の位置を取得し、それをあなたの好きな割合で掛けます。その後、数もたらすために、背景の位置を変更します。

$(document).ready(function(){ 
 
    var yOffset; 
 
    $(window).scroll(function(){ 
 
     yOffset=$(window).scrollTop()*10; 
 
     $("body").css('background-position', '0px '+-yOffset+'px'); 
 
     }) 
 
})

body{ 
 
    background:url('https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png'); 
 
    height:4000px}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="test"> 
 
&nbsp; 
 
</div>

出典

2016-08-07 14:10:12

これは動作しますが、非常に遅いです。 CSS変換を使ってGPUを利用する方が良いです。 JavaScriptでこれを行うことができます。これを反映するためにあなたの答えを変えれば投票権が得られます。 –

ありがとうございます。申し訳ありませんが、私はGPUの使用率についてはわかりません。 –

http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css –

背景画像のスクロール速度を上げる方法は？

答えて

関連する問題