為容器中的非全寬圖像創建視差效果

Question

我在網站的這一部分專門介紹即將舉行的活動。 行為的給定圖片之一是可笑的垂直，但是提供的信息很少甚至沒有。 因此，我認為我可以使圖片垂直於該部分的限制之外，並使其具有視差滾動效果。

這是整個部分的代碼：

<section id="acts">
<div class="container-fluid">
    <div class="row">
        <div class="col-lg-4 col-lg-offset-2 kujopad">
                <p>The Kujo Kings
                Known for their Ska/Punk anthems and high energy packed out shows, this 20 something band has built a strong Australian-wide following since forming in 2010.  The six-piece band are dedicated to entertaining fans with their catchy and humorous tunes, with dangerous amounts of energy, dancing, costumes and gratuitous fun being a consistent feature of their shows, the Kujo Kings are an act not to be missed!</p>
        </div>
        <div class="col-lg-4 kujoimgpos" data-scroll-speed="6">
            <img style="height: 700px; width: auto;" src="img/Kujo%20Kings%20image.jpg">
        </div>
    </div>
</div>
</section>

我試圖通過給保存圖像的div負負邊距來實現效果，該div用於隱藏該部分上下的圖像的頂部和底部，然后對div應用滾動速度，工作，然后是圖像，這也不起作用。 我知道那里所有的parallax.js及其等效物，但在所有演示中，他們都是在全屏背景下執行此操作的，因此無法在我的用例中使用。

我已經看到了這種效果的邏輯缺陷，因為給div不同的滾動速度會從一開始就改變滾動速度，因此一旦用戶滾動到該部分，它就會消失或完全錯誤。 希望你們能幫助:)我不介意使用js

我還給圖像設置了-10的z索引，以防萬一可能有助於視差效果，但是正如我所說的那樣，邏輯存在缺陷。

.kujoimgpos {
    margin-top: -50px;
    margin-bottom: -50px;
    z-index: -10;
}

而且我不能使用位置：固定； 因為我只希望圖像滾動過去時略微滾動。 並不完全看起來不現實。

Answer 1

通常，您應該使用代碼創建Codepen或jsfiddle，以使人們更輕松地為您提供幫助。

這是我使用jQuery的快速解決方案。 我確實編輯了html並添加了一些樣式，請參見codepen中的工作示例。

這是使其工作的jQuery

//get heigth of the article part
var pContainerHeight = $('.kujopad').height();
console.log(pContainerHeight);
// assign same height to image part
$('.kujoimgpos').css({'height' : pContainerHeight + 'px'});

$(window).scroll(function(){

  var wScroll = $(this).scrollTop();

  if (wScroll <= pContainerHeight) {
//pull bg image of kujoimgpos wScrill*1.6 pixels up
    $('.kujoimgpos').css({
          'background-position' : '0 -'+ wScroll *1.6 +'px'
    });
  }
});

http://codepen.io/antonk52/pen/YwzqQN

這個人親自解決問題並為我的網站開發了解決方案，您可以在此處查看結果

他更改了一些Javascript，以包括偏移量，以指示滾動開始時的時間以及如何確定高度。

這是腳本和所有類

$(document).ready(function(){

    //get heigth of the article part
    var pContainerHeight = $('#heightid').outerHeight(true);
    console.log(pContainerHeight);
    // assign same height to image part
    $('.kujoimgpos').css({'height' : pContainerHeight + 'px'});

    $(window).scroll(function(){

      var wScroll = $(this).scrollTop();
      console.log($(this).scrollTop());
      if (wScroll => 1000) {
    //pull bg image of kujoimgpos wScroll*1.6 pixels up
        $('.kujoimgpos').css({
              'background-position' : '0 -'+ wScroll *0.2 +'px'
        });
      }
    });

});


.kujoimgpos {
    background-image: url('/img/kujokings.jpg');
    background-repeat: no-repeat;
}

.kujopad {
    padding-top: 180px;
    padding-bottom: 200px;
}

和html部分

<section id="acts" class="acts">
<div class="container-fluid" >
    <div class="row">
        <div class="col-sm-4 col-sm-offset-2 kujopad" id="heightid">
                <h1>The Kujo Kings</h1>
                <p>The Kujo Kings
                Known for their Ska/Punk anthems and high energy packed out shows, this 20 something band has built a strong Australian-wide following since forming in 2010.  The six-piece band are dedicated to entertaining fans with their catchy and humorous tunes, with dangerous amounts of energy, dancing, costumes and gratuitous fun being a consistent feature of their shows, the Kujo Kings are an act not to be missed!</p>
        </div>
        <div class="col-sm-4 kujoimgpos">
        <! the image is here >
        </div>
    </div>
</div>
</section>