Question

我在尝试让一个元素在移动的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>

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

非常感谢任何帮助

让我疯狂

希望有人可以提供帮助

Answer 1

像丹在评论中所说的那样，你需要将容器的相对位置和盒子绝对定位。你应该在尝试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>

Skrollr相对于滚动div为内部元素设置动画

1 个答案: