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