我在尝试使元素在移动的div内进行动画处理时遇到问题;

想象一下,我有一个div(蓝色800宽x 100高)在屏幕外,在屏幕下方,当您向下滚动时,它会进入屏幕,然后继续向上并消失在屏幕顶部之外。我称这个div为“容器”。

现在想象一下,如果我在“容器” div中有一个较小的div,称为“盒子”,并且我对“盒子”应用了动画,使它从左向右移动。

我希望当我向下滚动时,随着容器在屏幕上向上移动,框将在容器内从左向右移动。 (导致框看起来像是沿屏幕对角线向上移动)

我得到的结果是,容器按预期方式在屏幕上移动,但是该框现在位于容器的外部,并且在屏幕底部从右向左移动

我不知道如何使盒子在其父容器内移动并向上滚动。

我想我需要使用relative模式(或视口模式),但我根本无法使用它。

spacer div:

<div id="justaspacer" style="height:1000px;"></div>


(容器div):

<div id="container" style="width:800px; background:#D1E3ED; height:100px; margin:auto;></div>


(方框div):

<div id="box" style="background:#00F; width:100px; height:100px;" data-anchor-target="#container" data-100-bottom="left:100%; opacity:0;" data--100-bottom="left:50%;opacity:1;"  data-top="top:80%;">"</div>"


这导致容器向上滚动,并且框从屏幕外飞进来
完全从容器中取出。

这就是所有代码,没有其他的css,只有

<script type="text/javascript" src="dist/skrollr.min.js"></script>

<!--[if lt IE 9]>
<script type="text/javascript" src="dist/skrollr.ie.min.js"></script>
<![endif]-->

<script type="text/javascript">
var s = skrollr.init({
    edgeStrategy: 'set',
    easing: {
        WTF: Math.random,
        inverted: function(p) {
            return 1-p;
        }
    }
});
</script>


这个javascript

任何帮助将非常感激

一直让我发疯

希望有人能帮忙

最佳答案

就像Dan在评论中说的那样,您需要将容器相对位置和盒子绝对位置。在尝试使用skrollr之前,您应该真正学习CSS。

http://jsbin.com/aWOB/1/edit

<div id="container" style="width:800px; background:#D1E3ED; height:100px; margin:auto;position:relative;"></div>




<div id="box" style="background:#00F; width:100px; height:100px;position:absolute;" data-anchor-target="#container" data-bottom="left:100%;margin-left:-100px;" data-top="left:0%;margin-left:0px;"></div>

10-05 21:12
查看更多