CSS固定されたバックグラウンドの添付ファイルをスクロールしてdivを作成することはできますか？

Question

私はいくつかのクールな視差効果を作成しようとしていますが、それが静止している代わりに、background-attachement: fixedスクロールビット（通常のスクロールよりも遅い）を持つbg画像でdivを作れば、

これは私のCSSは次のようになります。

.parallax{ 
    height: 400px !important; 
    width: 100%; 
    background-size: cover; 
    background-attachment: fixed; 
} 

これが私のdiv

<div class="parallax" style="background-image: url('img/image.jpg'); "> 
</div> 

である私はこれを試してみた：

$('div.parallax').each(function(){ 
     $scroll_speed = 10; 
     $this = $(this); 
     $(window).scroll(function() { 
      $bgScroll = -(($win.scrollTop() - $this.offset().top)/ $scroll_speed); 
      $bgPosition = 'center '+ $bgScroll + 'px'; 
      $this.css({ backgroundPosition: $bgPosition }); 
     }); 
}); 

は、私が唯一、動作しているようです誰も私を助けることができる変数を変更したにもかかわらず、スクロール速度を上げることはできませんか？

Answer 1

倍率を変更することで、スクロール速度を簡単に調整することができます。 5のファクターは、速いスクロール速度であり、20は遅いスクロール速度である。

$('div.parallax').each(function() { 
 
    $scroll_speed = 5; 
 
    $this = $(this); 
 
    $('#container').scroll(function() { 
 
    $bgScroll = -(($('#container').scrollTop() - $this.offset().top)/$scroll_speed); 
 
    $bgPosition = 'center ' + $bgScroll + 'px'; 
 
    $this.css({ 
 
     backgroundPosition: $bgPosition 
 
    }); 
 
    }); 
 
});

.parallax { 
 
    height: 400px !important; 
 
    width: 100%; 
 
    background-size: cover; 
 
    background-attachment: fixed; 
 
    background-position: center 0; 
 
    font-weight: bold; 
 
    font-size: 20px; 
 
    color: red; 
 
} 
 
#container { 
 
    height: 100px; 
 
    overflow: auto; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="container"> 
 
    <div class="parallax" style="background-image: url('http://imgs.xkcd.com/comics/jack_and_jill.png'); "> 
 
    bla bla bla 
 
    <br>bla bla bla 
 
    <br>bla bla bla 
 
    <br>bla bla bla 
 
    <br>bla bla bla 
 
    <br>bla bla bla 
 
    <br>bla bla bla 
 
    <br>bla bla bla 
 
    <br>bla bla bla 
 
    <br>bla bla bla 
 
    <br>bla bla bla 
 
    <br>bla bla bla 
 
    <br>bla bla bla 
 
    <br>bla bla bla 
 
    <br>bla bla bla 
 
    <br>bla bla bla 
 
    <br> 
 
    </div> 
 
</div>