1

ここに問題があります。Skrollr プラグインを使用して視差効果/アニメーション サイトを作成し、クライアントの 1 人に製品を提示しています。

ビューポートのすぐ外側に要素を配置する必要がありますが、固定ラッパーにアタッチし、div の中心にアニメーション化する必要があります。

あまりにも多くの js を避けるために、これを css でのみ実行したいと思います (Skrollr は css コード to animate をとにかく使用します)。

私が試したのは、要素を +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

ここに行きます=)、しかし、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>
于 2013-07-09T15:02:30.893 に答える