javascript - 为容器中的非全宽图像创建视差效果

Question

我有this section of my site致力于将要在事件中进行的行为。其中一个行为的给定图片非常垂直，但提供的信息几乎没有。所以我想我可以让图片垂直延伸到部分的限制之外，并给它一个视差滚动效果。

这是整个部分的代码:

<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 应用滚动速度，这不起作用，然后是图像，这也不起作用。我知道那里的所有 parallax.js 和等效项，但在所有演示中，它们都是针对全屏背景执行此操作的，我无法让它在我的用例中工作。

我已经可以看到我的效果逻辑中的缺陷，因为给 div 不同的滚动速度会从一开始就改变滚动速度，因此一旦用户滚动到那个位置，它就会消失或完全错误地定位部分。希望你们能帮忙 :) 我不介意使用 js

我还给图像设置了 -10 的 z-index 以防万一这可能有助于视差效果，但正如我所说的逻辑存在缺陷..

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

而且我不能使用 position: fixed;因为我只希望图像在滚动过去时稍微滚动。不完全，这看起来不现实。

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

这个人亲自为我的网站解决问题并开发了一个解决方案，您可以看到 here 的结果

他更改了一些 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>