复杂的视差效应元素定位

Question

这就是问题所在，我使用Skrollr插件制作了一个视差效果/动画站点，为我的一个客户展示了一个产品。

现在我在定位方面遇到了一个很大的问题，我需要将元素定位在视口之外，但它们必须附加到固定的包装器上，并动画到div的中心。

我只想用css来做这件事，以避免太多的js (Skrollr使用css代码来实现动画)。

我尝试的是用+200%或-200%来调整元素的位置，这在小屏幕上效果很好，但在大屏幕上，我们仍然可以看到这些元素。所以这不是一个好的解决方案。

我试过使用火狐浏览器的css3值VH和VW，但是将它们放在屏幕中央是一个问题，而且在火狐和Chrome之间似乎有问题。

这也是我的测试，这个是使用%：

http://natcom.fr/commun/sites_construction/animation/old

这是使用VH和VW：

http://natcom.fr/commun/sites_construction/animation

我提前感谢你们所有人能给予的任何帮助。

Answer 1

这里是=)，但有一个问题是，当内部div获得绝对/相对位置时，它不再起作用。但是我不知道你完整的html结构等等。

您还可以将对象从内部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>