1

我有一个 skrollr 动画，它基本上从底部向上滑动 H2 标签，同时从顶部向下滑动 div。当它们的父级位于屏幕顶部时，它们都固定定位并对齐以在屏幕上水平居中相遇。

当父级位于屏幕顶部时，h2 标签居中，右侧 div 的顶部位于屏幕顶部，这很好，问题是右侧 div 应该向下滑动并淡出屏幕时父母的底部到达顶部，但它只是打破并向下移动而没有任何动画。

为什么会发生这种情况？父母高度与右侧 div 的高度相同

这是我如何做的示例代码：

<section class="sliderInSection" id="clients">

 <div class="leftSide">
    <h2
        data-anchor-target="#clients"
        data-bottom-top="top: 100%; opacity: 0;"
        data-top="top: 50%; opacity: 1;"
        data-top-bottom="top: -50%; opacity: 0;"
    ><span>Our<br/>Clients</span>
         <div class="arrow"></div>
    </h2>
 </div>

   <div class="rightSide"
    data-anchor-target="#clients"
    data-bottom-top="top: -100%; opacity: 0;"
    data-top="top: 0%; opacity: 1;"
    data-top-bottom="top: 100%; opacity: 0;"
>
           <p>here is content</p>
    </div>


</section>
4

0 回答 0