自举网格中的视差效果

时间:2017-03-02 04:24:26

标签: javascript jquery css twitter-bootstrap parallax

大家好,我试图在自举网格系统中制作简单的视差效果,但我遇到了问题。我并排制作了两个divs,我想要一个div来保持静态图像,而另一个应该有视差效果。

我遇到了视差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

1 个答案:

答案 0 :(得分:3)

这是你的答案

你需要使用jquery

检查此https://codepen.io/parthjasani/pen/YZwJMq

remove 
 background-attachment: fixed; 
from css 

并添加此jquery代码

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