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

Question

我有 this section of my site 致力于活动中的行为。其中一幕的给定图片非常垂直，但提供的信息很少 none。所以我想我可以让图片垂直延伸到部分的限制之外，并给它一个视差滚动效果。

这是整个部分代码：

<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

一般来说，您应该使用您的代码创建一个代码笔或一个 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>

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

Creating a parallax effect for a non full width image in a container

html

javascript

css

parallax

twitter-bootstrap