復雜的視差效果元素定位

Question

這是問題所在，我正在使用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

我在此先感謝大家的幫助。

Answer 1

在這里，您可以使用=），但是一個問題是，當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>

復雜的視差效果元素定位

問題描述

1 個解決方案

解決方案1
0 2013-07-09 15:02:30

復雜的視差效果元素定位

問題描述

1 個解決方案

解決方案1 0 2013-07-09 15:02:30

解決方案1
0 2013-07-09 15:02:30