jquery - 当我在调整大小的窗口中滚动半视差时出现空白

Question

我有一个 wordpress这是我从另一个人那里接手的，看起来顶部的视差部分有一个错误。好吧，半视差，它的滚动速度比主页慢一些。我试过摆弄，改变宽度和类似的东西。问题似乎是原始裁剪太小了，但我不知道如何更改原始裁剪。

因为当它全屏时，它在滚动时效果很好，但如果我把它变成屏幕的一半，当我向下滚动时会有空白。所以我假设它是需要更小的原始裁剪，所以当它调整大小时仍然有“更多图像”。 (是的，我试过使用更大的图像，同样的问题)。这篇文章中所有引用的图片都可以在 this url 上找到

请看最后一张空白图片

滚动时查看中间图像以获得所需效果

这是图片的html代码:

<section id="hero-header" data-speed="8" data-type="background" style="background: url("http://playgrounddistribution.com/wp-content/uploads/2017/03/playground-logo-1.jpg"); ?>')  50% 0 no-repeat fixed;">

请参阅上面 imgur 链接(此 url)中的第一张图片以获取背景脚本。

英雄标题

#hero-header {
    height: 100%; 
    width: 100%; 
    position: relative; 
    -webkit-background-size: cover !important;  
    -moz-background-size: cover !important; 
    -o-background-size: cover !important; 
    background-size: cover !important;
}

一些调整大小的代码，我希望这些足够了

@media handheld, only screen and (max-width: 769px) {
    
    
    #hero-header {
        background-position: center center !important;
        background-attachment: scroll !important;
} 
}

Answer 1

技巧是使用 dataspeed 属性和 parallax.js 行 #18 和 #37