2013-10-18 29 views
1

你好我尝试了解sckrollr但我似乎在相对使用失败,有什么即时试图得到的是:skrollr相对不工作正常

  • 有,里面还
  • 当一些元素的盒子X号该元素锚到达视口锚做的东西

我不明白我上面的代码,并skrollr做作为洙AI开始滚动页面第二的.text元素的动画,他should't只是让仅当元素锚点到达视口锚点时动画要么?

我只是不明白

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

回答

1

报价https://github.com/Prinzhorn/skrollr#relative-mode-or-viewport-mode

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

在你的情况下,你正在动画一个垂直填充,它与锚点发生冲突。这是一个鸡/蛋问题。正如文档中提到的refresh不会帮助你。您需要将附加填充作为偏移量包含在关键帧中。

+0

感谢您的回答,但,这不是问题,didn't在规模和填充动画改变由skrollr一个内部元件上做的框。 –

+0

我明白了,谢谢你的回复。我希望我能尽快解决这个问题。 – Prinzhorn

1

我发现这个问题的解决方案,似乎其他人与我有同样的问题,所以事情是,skrollr设置身体高度自动做一些计算,它搞砸了白色元素有100%高度,如我的部分元素,所以解决刚才在CSS表格“body {height:100%!important;}”中设置的问题。它解决了我的问题。

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