这就是问题所在，我正在使用 Skrollr 插件制作视差效果/动画网站来为我的一位客户展示产品。
现在我在定位方面遇到了一个大问题，我需要将元素定位在视口(viewport)之外，但它们必须附加到一个固定的包装器上，并且动画到 div 的中心。
我很乐意只在 css 中执行此操作以避免过多的 js(无论如何 Skrollr 使用 css 代码来制作动画)。
我所尝试的只是将我的元素定位为 +200% 或 -200%，这在较小的屏幕上效果很好，但在大屏幕上，我们仍然可以看到这些元素。所以这不是一个好的解决方案。
我曾尝试使用 css3 值 VH 和 VW，但之后将它们定位在屏幕中央是一个问题，而且在 Firefox 和 Chrome 之间似乎有问题。
这也是我的测试，这个是使用 %:
http://natcom.fr/commun/sites_construction/animation/old
这是使用 VH 和 VW:
http://natcom.fr/commun/sites_construction/animation
我提前感谢大家提供的任何帮助。
最佳答案
给你 =)，但一个问题是当 inner-div 获得绝对/相对位置时它不再起作用。 但我不知道你的完整 html 结构等。
你也可以从 inner-div 中取出对象吗？
<!DOCTYPE html>
<html>
<head>
<style>
body, html {
width: 100%;
height: 100%;
overflow: hidden;
}
.outer-div {
left: -200px;
right: -200px;
position: absolute;
}
.object {
position: absolute;
left: 0;
width: 200px;
height: 200px;
background: #0000FF;
}
.move-object {
transition-duration: 10s;
margin-left: -100px;
left: 50%;
}
.inner-div {
width: 500px;
margin-left: auto;
margin-right: auto;
border: 1px solid black;
height: 200px;
}
</style>
<script>
function moveit() {
var element = document.getElementById('testobj');
element.setAttribute('class', 'object move-object');
}
</script>
</head>
<body>
<button onclick="moveit();">Click</button>
<div class="outer-div">
<div class="inner-div">
<div class="object" id="testobj">
</div>
</div>
</div>
</body>
</html>
关于javascript - 复杂的视差效果元素定位，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17550257/