Question

与skrollr有一些乐趣。据我了解，一旦你传递了你设置为数据属性的任何像素，你应该运行的任何css代码。我在这里想念的是什么？我只是试图显示/隐藏一些段落，因为它们到达开始和结束像素，但它们出现在标记之前，并且之后不会自行消失。例如，为什么p2会在第50帧之前出现？为什么不消失？

http://codepen.io/anon/pen/rLVGjw

var s = skrollr.init({
  forceHeight: true,
  render: function(data){
    document.querySelector(".whereami").innerHTML = data.curTop;
  }
});

    body {
      background: #000;
    }
    p {
      position: absolute;
      top: 200px;
      left: 200px;
    }

  <script src="
               https://cdnjs.cloudflare.com/ajax/libs/skrollr/0.6.30/skrollr.min.js"></script>
<div class="whereami" style="position: fixed; top: 0; left: 0; color: #fff">0</div>

  <main>
    <p data-0="opacity: 1" data-50="opacity: 0">p1</p>    
    <p data-0="opacity: 0" data-50="opacity: 1" data-100="opacity: 0">p2</p>    
    <p data-0="opacity: 0" data-150="opacity: 1" data-200="opacity: 0">p3</p>    
    <p data-0="opacity: 0" data-200="opacity: 1" data-250="opacity: 0">p4</p>    
    <p data-0="opacity: 0" data-250="opacity: 1" data-300="opacity: 0">p5</p>

    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />

Answer 1

p2在50px滚动之前显示，因为它在“data-0”上具有0不透明度，然后它在“data-50”上具有1个不透明度，这意味着在该50px滚动中不透明度将从0变为1。这意味着它将与p1重叠，p1的不透明度在相同的50 px中从1变为0。

你需要这样的东西：

<p data-0="opacity: 1" data-50="opacity: 0">p1</p>    
<p data-50="opacity: 0" data-100="opacity: 1" data-150="opacity: 0">p2</p>

我们的想法是不要在相同的滚动值中重叠段落。你完成了50到50px的0到50px之间的转换，然后你开始将新段落的转换从50px转换到你认为需要多少，等等其他元素。

我在您的codepen中尝试了以下代码中的前3段，动画可以按照您的意愿运行：

<p data-0="opacity: 1" data-50="opacity: 0">p1</p>    
<p data-50="opacity: 0" data-100="opacity: 1" data-150="opacity: 0">p2</p>    
<p data-150="opacity: 0" data-200="opacity: 1" data-250="opacity: 0">p3</p>

skrollr关键帧未正确执行

1 个答案: