Question

我设法按照教程（code.tutsplus.com/tutorials/a-simple-parallax-scrolling-technique--net-27641）进行视差滚动效果，效果很好。

这是我的视差脚本：

$(document).ready(function(){

var $window = $(window); 

$('section[data-type="background"]').each(function(){
var $bgobj = $(this);

    $(window).scroll(function() {

    var yPos = -($window.scrollTop() / $bgobj.data('speed'));

        var coords = '50% '+ yPos + 'px';

        $bgobj.css({ backgroundPosition: coords });
    });
  });
});

我在显示项目的几个页面上需要这样的效果，因此我直接在HTML中传输了整个CSS属性，而不是每个页面都有一个CSS文件。

在教程中它是这样的：

#home { 
 background: url(home-bg.jpg) 50% 0 repeat fixed; min-height: 1000px; 
 height: 1000px; 
 margin: 0 auto; 
 width: 100%; 
 max-width: 1920px; 
 position: relative; 
}

和html（我没有保留＆＃34;文章＆＃34;元素，因为我只显示图片）：

<section id="home" data-type="background" data-speed="10" class="pages">     
     <article>I am absolute positioned</article>
</section>   

<section id="about" data-type="background" data-speed="10" class="pages">
     <article>Simple Parallax Scroll</article>
</section>

现在我的HTML中有这个：

    <section id="img1" data-type="background" data-speed="19" style="background: url(../../assets/img/projects/product/jorislaarman1.jpg) 0 no-repeat fixed;
    min-height: 1000px; margin: 0 auto; width: 100%; max-width: 1920px; position: absolute background-size : cover;">
    </section>

（对于我的页面中的每张图片，我都有其中一张^，接下来的部分只对它们有一个盒子阴影效果。

我现在遇到两个不同的问题：

首先，我有一些不同大小的图片，因此很多时候内容在滚动效果消失之前几乎看不到。

你可以在第一张图片上看到它：

vincentleroux.fr/projects/product/jorislaarman.html

全貌如下：

vincentleroux.fr/assets/img/projects/product/jorislaarman1.jpg

我想解决方案是将每张图片的大小调整为相同的比例，但这样做会非常有用。我希望有一种方法可以影响div / parallax滚动，以避免我的图片隐藏太快，但我无法让它自己工作：/。我尝试修改两个元素（容器和背景）的滚动速度，但我无法解决它。

我遇到的第二个问题是我在div中的图片放置。图片非常大，我将它们调整为大约1900px宽。但我仍然有一个问题，他们不是在正确的地方。

当你加载我给出链接的页面时，你可能会看到我的图片在开始滚动时结结巴巴。我尝试了不同的东西，我不知道它可能来自哪里......

您也可以在第一张图片中看到它：http://vincentleroux.fr/projects/arcade/wolverine.html

它也很好地说明了我的第二个问题，即我无法在div中垂直对齐我的图片，因此滚动中不会立即裁剪或隐藏其中有趣的内容。

我在这里尝试了解决方案：Is it really impossible to make a div fit its size to its content?

但似乎没有工作......：/

我还尝试了不同的＆＃34;背景大小＆＃34;属性（封面，包含......）但我不想丢失图片的整页宽度。

这是一个包含我所有代码的JSfiddle：http://jsfiddle.net/79D2J/

Answer 1

您需要减去offset.top

这样的事情：

var topWin = $(window).scrollTop();
var yPos = -((topWin - $bgobj.offset().top) / $bgobj.data('speed'));

在视差滚动页面中：使div适合内容，并调整位置

1 个答案: