skrollr相对无法正常工作

时间:2013-10-18 16:37:19

标签: jquery css3 skrollr

您好我试图了解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>

2 个答案:

答案 0 :(得分:1)

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

  

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

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

答案 1 :(得分:1)

我找到了这个问题的解决方案似乎其他人和我有同样的问题,所以问题是skrollr将身高设置为auto来进行一些计算,它会弄乱100%高度的whit元素比如我的section元素,所以要解决刚才在css表中设置的问题“body {height:100%!important;}”。它解决了我的问题。

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