使用skrollr的不透明度起始值错误

Wrong opacity start value using skrollr

本文关键字：错误 不透明度 skrollr 使用      更新时间：2023-09-26

我第一次尝试使用skrollr，但很难正确使用。我只想说:

"当.slide的顶部位于视口顶部时，将不透明度设置为1，然后当.slide的底部位于视口顶部时，它应该从1到0动画"

当用户滚动经过.slide时，基本效果将是文本淡出为零。

问题是页面加载时不透明度已经小于1 

body {
    height: 2000px;
    margin: 0;
}
.slide {
    position: relative;
    background-color: #f0f0f0;
    height: 500px;
}
h1 {
    position: absolute;
    bottom: -50px;
    left: 50px;
    font-size: 38px;
}
<section class="slide">
    <h1 data-anchor-target=".slide" data-bottom-top="opacity: 1" data-top-bottom="opacity: 0">I should fade out</h1>
</section>
var s = skrollr.init();

小提琴:http://jsfiddle.net/wj2XG/1/

编辑:

我已经通过改变data-bottom-top="opacity: 1"到data-0="opacity: 1"修复了这个问题，但我想知道为什么前者不工作，因为我认为它们是一样的?

当。slide的顶部位于视口的顶部时，将不透明度设置为1，然后当。slide的底部位于视口的顶部时，它应该从1动画到0

就是

<h1 data-anchor-target=".slide" data-top-top="opacity: 1" data-top-bottom="opacity: 0">I should fade out</h1>
不

<h1 data-anchor-target=".slide" data-top-bottom="opacity: 1" data-top-bottom="opacity: 0">I should fade out</h1>
http://jsfiddle.net/wj2XG/2/

相关文章：