1

您好，我试图理解 sckrollr，但我似乎在相对使用方面失败了，我试图得到的是：

  • 有 X 个盒子，里面有一些元素
  • 当元素锚点到达视口锚点时

我不明白我有上面的代码，skrollr 做第二个 .text 元素的动画，因为 soo ai 开始滚动页面，他不应该只在元素锚点到达视口锚点时才制作动画吗？

我只是不明白

    <style>
      body{height:100% !important;} /*SOLUTION FOR THIS PROBLEM*/
      .paralaxelem2{width:100%;height:100%;background:50% 0 no-repeat fixed;background-size:100% 100%;}
      .text{margin:0 auto;width:500px;padding:150px 0 0 0;position:relative;}
      .text h1{padding:0px;margin:0px;text-transform:uppercase;color:#000;}
      .text p{background-color:#000;color:#fff;padding:15px;}
    </style>


<section class="paralaxelem2" style="background-image:url('/images/fundos/bg_dummy_2.jpg');">
  <div class="text" data-0-top-top="opacity:1;" data--300-top-top="opacity:0;">
    <h1>SOme Home page title goes arround</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, est, consectetur, officiis, soluta impedit eveniet esse iusto temporibus asperiores quasi quos mollitia voluptates rerum quae voluptatem amet quidem totam. Et!</p>
  </div>
</section>


<section class="paralaxelem2" style="background-image:url('/images/fundos/bg_dummy_1.jpg');">
  <div class="text" data-bottom-top="opacity:1;padding-top:150px;" data-bottom-bottom="opacity:1;padding-top:600px;">
    <h1>SOme Home page title goes arround</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, est, consectetur, officiis, soluta impedit eveniet esse iusto temporibus asperiores quasi quos mollitia voluptates rerum quae voluptatem amet quidem totam. Et!</p>
  </div>
</section>


<section class="paralaxelem2" style="background-image:url('/images/fundos/bg_dummy_3.jpg');">
  <div class="text">
    <h1>SOme Home page title goes arround</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, est, consectetur, officiis, soluta impedit eveniet esse iusto temporibus asperiores quasi quos mollitia voluptates rerum quae voluptatem amet quidem totam. Et!</p>
  </div>
</section>
4

2 回答 2

1

引用https://github.com/Prinzhorn/skrollr#relative-mode-or-viewport-mode

重要提示：所有这些值都将预先计算并转换为绝对模式。因此，如果元素的框高度（高度、填充、边框）或元素在文档中的位置发生变化，您可能需要调用 refresh()（请参阅下面的 JavaScript 部分中的文档）。窗口大小调整由 skrollr 处理。

在您的情况下，您正在为垂直填充设置动画，这与锚点冲突。这是一个鸡/蛋的问题。refresh如文档中所述，对您没有帮助。您需要在关键帧中包含额外的填充作为偏移量。

于 2013-10-18T17:48:24.160 回答
1

我找到了解决这个问题的方法，似乎其他人遇到了和我一样的问题，所以问题是 skrollr 将身体高度设置为自动进行一些计算，它弄乱了具有 100% 高度的白色元素，例如我的部分元素，因此要解决刚刚在 css 表“body{height:100% !important;}”中设置的问题。它为我解决了这个问题。

来源：https ://github.com/Prinzhorn/skrollr/issues/347

于 2013-10-21T09:26:07.520 回答