引導網格中的視差效應

你好傢伙我試圖在引導網格系統中做出簡單的視差效應，並且遇到了問題。我並排了兩個divs，我想要一個div保持靜態圖像，而其他應該有視差效果。引導網格中的視差效應

我有視差div背景-size屬性一個問題，無論我怎麼努力，我不能讓它覆蓋我的視差的div我想要的方式，背景圖片總是最終會被更大的話，應該是或者沒有正確對齊。

這是我的代碼：

HTML：

<section id="twoImages" class="container-fluid"> 
    <div class="row"> 
     <div class="col-md-6"> 
      <div class="parallax"></div> 
     </div> 
     <div class="col-md-6"> 
      <img class="d-block img-fluid" src="https://placebear.com/715/470" alt="shoe newspaper"> 
     </div> 
    </div> 
</section>

CSS：

body { 
    margin-bottom: 50em; 
} 

#twoImages { 
    padding: 0; 
    margin: 0; 
} 
#twoImages .col-md-6 { 
    padding: 0; 
    margin: 0; 
} 
#twoImages .parallax { 
    /* The image used */ 
    background-image: url("https://placebear.com/715/470"); 
    /* Full height */ 
    height: 100%; 
    /* Create the parallax scrolling effect */ 
    background-attachment: fixed; 
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: cover; 
}

這裏是codepen這樣你就可以更好地理解我的問題https://codepen.io/Karadjordje/pen/VpeBzp

來源

2017-03-02 Zvezdas1989

@AjayBisht那基本上使視差效果部分 – Zvezdas1989

這可能已經在這裏得到解答http://stackoverflow.com/questions/21786272/css-background-size-cover-background-attachment- fixed-clipping-background-im –

這裏是你的答案

你需要使用jQuery的

檢查這個https://codepen.io/parthjasani/pen/YZwJMq

並添加此jQuery代碼

var $ = jQuery.noConflict() 
$(window).scroll(function(){ 
    var scroll = $(this).scrollTop() 
    $(".parallax").css({"background-position":"0px "+scroll/2+"px"}) 
})

來源

2017-03-02 07:11:16

這很好用，謝謝你的幫助。 – Zvezdas1989

引導網格中的視差效應

回答

相關問題