英雄视差滚动

Question

在类似的文章上通读并应用了this answer，我在我的网站上获得视差滚动效果时遇到了一些麻烦。 从本质上讲，它是可行的，但是效果却很小，我不得不使用欺骗手段来保持它的位置。

任何更正都会很棒；我正在寻找滚动时更明显的效果。 该尝试当前正在进行here。以下是相关代码：

HTML：

<div class="hero" id="pubHero">
    <div class="heroIcon">
        <img src="/spimages/pubIcon.png" height="90px">
        <br>Publishing
    </div>
</div>

CSS：

html, body {
    height: 100%;
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}

body {
    margin: auto;
    padding: 0;
    background: #1e1e1e;
    perspective: 1px;
}

.hero {
    width: 100%;
    height: 400px;
    background: url(/spimages/publishing.jpg) no-repeat 50% 50%;
    background-size: cover;
    font-family: 'Source Sans Pro', sans-serif;
    font-family: 'Lato', sans-serif;
    color: #efefef;
    text-align: center;
    font-size: 20pt;
    transform:
      translateZ(-.1px)
      scale(1.3);
    z-index: -1;
}

.heroIcon {
    display: block;
    margin: auto;
    padding-top: 120px;
    transform: 
      scale(0.77)
}