html - 向下滚动时淡出 div(相对于滚动)

Question

我有一个 100% 高度和宽度的介绍屏幕。

我想以 1 的不透明度开始它，当用户向下滚动时，不透明度通常会降低，直到 div 的底部距离顶部大约 100 像素 - 这时候不透明度应该达到 0。

有什么建议吗？一直在寻找解决方案，但还没有找到任何东西。

你能用 CSS3 做到这一点吗？

到目前为止，这是我的 HTML 和 CSS

HTML

<div class="outer" id="welcome">
<div class="inner">
<p>Hi Hello Hi Hello Hi Hello</p>
</div>
</div>

<div class="content">
</div>

CSS

.outer {
    display:table;
    height:100%;
    width:100%;
}

.inner {
    display:table-cell;
    vertical-align:middle;
    text-align:center;
}

.content {
height:1000px;
background-color:pink;
}

Answer 1

This可能是你需要的。使用 Jquery。