Question

问题在于，我正在使用Skrollr插件制作一个Parallax效果/动画网站，为我的一个客户展示产品。

现在我遇到了一个很大的定位问题，我需要将元素放在视口外面，但是它们必须连接到一个固定的包装器上，然后设置为div的中心。

我喜欢只在css中这样做，以避免过多的js（Skrollr使用css代码ton动画无论如何）。

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

我尝试使用css3值VH和VW，但要将它们定位在屏幕中央是一个问题，并且它似乎在Firefox和Chrome之间出错。

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

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

这是使用VH和VW：

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

我提前感谢你们所提供的任何帮助。

Answer 1

这里你去=），但是一个问题是当inner-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>

复杂的视差效应元素定位

1 个答案: