我有一个网站有一些部分,有一个“图像部分”,这部分大约3000px高度和背景图像是固定的所以我得到一个很好的效果 - 并在一段时间滚动到这个图像部分我想要显示信息文本。这部分工作正常。
我想要的: 显示文本后,经过一小段时间(我的意思是几个滚动步骤)来读取文本,我希望在部分结束前将不透明度降低到0(滚动位置)约为100px。
<section class="box red">
</section>
<section class="box blue">
</section>
<section class="image-section">
<div class="overlay">
<div class="overlay-text">
lorem ipsum
</div>
</div>
</section>
<section class="box red mysection">
</section>
<section class="box blue">
</section>
我的小提琴:https://jsfiddle.net/e53f9m55/3/ (在js部分,顶部是靶心插件,只需忽略它)
答案 0 :(得分:0)
您已经在改变叠加层的不透明度与距离顶部的距离,因此您可以使用距离底部的距离做类似的事情。像这样:
var distanceFromBottom = $(document).height() - $(window).height() - $(window).scrollTop();
opacity_text = distanceFromBottom / $(document).height();
$(".overlay-text").css({"opacity" : opacity_text});