1

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

现在我在定位方面遇到了一个大问题，我需要将元素定位在视口之外，但它们必须附加到一个固定的包装器上，并动画到 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

我提前感谢大家提供的任何帮助。

4

1 回答 1

0

在这里你去=），但一个问题是当内部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>
于 2013-07-09T15:02:30.893 回答