Question

我第一次尝试使用skrollr并且无法正确使用http://jsfiddle.net/wj2XG/1/。我想做的就是说：

＆＃34;当.slide的顶部位于视口顶部时，将不透明度设置为1，那么当.slide的底部位于视口的顶部时，它应该是动画从1到0＆＃34;

基本上，当用户滚动传递.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();

小提琴：{{3}}

修改

我通过将data-bottom-top="opacity: 1"更改为data-0="opacity: 1"来解决此问题，但我想知道为什么前者不起作用，因为我认为它们会是同一个东西？

Answer 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/

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

1 个答案: