0

誰かがこれで私を助けてくれることを願っています:

私は、いくつかのキーフレーム アニメーションと、下にスクロールするとオーバーレイされるいくつかの固定背景画像を含む 1 ページ レイアウト サイトに取り組んでいます。

奇妙なことに (またはそうではない)、background-attachment を管理できません。キーフレーム アニメーションで動作するように修正されました。

 <style>
.container{with:300px; height:400px}

.scaleAnimation {
    width:300px;
    height:300px;
    background-color:blue;
    -webkit-animation: scale 6s ease 3 normal;
    background-image:url("http://tympanus.net/Development/FullscreenLayoutPageTransitions/images/3.jpg");
    margin-bottom:20px;
}
.mask {
    background-attachment:fixed;
    position:relative;
    width:400px;
    height:300px
}
.mask1 {
    background-image:url(http://tympanus.net/Development/FullscreenLayoutPageTransitions/images/1.jpg);
    background-position: 0px 0px;
    background-repeat: no-repeat;
}
.mask2 {
    background-image:url(http://tympanus.net/Development/FullscreenLayoutPageTransitions/images/2.jpg);
    background-position: 0px 0px;
    background-repeat: no-repeat;
}
@-webkit-keyframes scale {
    from {
        -webkit-transform: scale(1.1);
    }
    to {
        -webkit-transform: scale(1);
    }
}
</style>

<div id="wrapper">
    <div class="container">
        <div class="scaleAnimation"></div>
    </div>
    <div class="container">
        <div class="mask mask1"></div>
        <div class="mask mask2"></div>
    </div>
</div>

例: http://jsfiddle.net/fpuLR/2/

アニメーションを削除すると、背景の添付ファイルは正常に機能します。

.scaleAnimation {
    width:300px;
    height:300px;
    background-color:blue;
    -webkit-animation: scale 6s ease 3 normal;
    background-image:url("http://tympanus.net/Development/FullscreenLayoutPageTransitions/images/3.jpg");
    margin-bottom:20px;
}

例: http://jsfiddle.net/fpuLR/3/

なぜこれが起こっているのですか？

前もってありがとう、Ku4ttro

4

1 に答える 1

0

これは最もエレガントな解決策ではありませんが、あなたと同じ問題に遭遇したときに私が見つけたものです.試してごらん。

私の知る限り、CSS アニメーション/キーフレームを使用すると、固定要素が「壊れて」しまいます。問題が発生していた div に同じアニメーション/キーフレーム (キーフレームを使用していたため) を適用しようとしましたが、固定位置が機能しました! ただし、同じアニメーションが適用されている間は、固定された位置を維持しているように見えました。

私の場合、ページがロードされたときに画像をフェードインしていたので、これを使用していました：

.fadeIn-Delay-2s {
    -webkit-animation-delay:2s;
    -moz-animation-delay:2s;
    -o-animation-delay:2s;
    animation-delay:2s;
}

.fadeIn-3s {
    -webkit-animation-duration:3s;
    -moz-animation-duration:3s;
    -o-animation-duration:3s;
    animation-duration:3s;
}

.fadeIn {
    opacity:0;
    -webkit-animation:fadeIn ease-in 1;
    -moz-animation:fadeIn ease-in 1;
    -o-animation:fadeIn ease-in 1;
    animation:fadeIn ease-in 1;
    -webkit-animation-fill-mode:forwards;
    -moz-animation-fill-mode:forwards;
    -o-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
}

私の解決策は、同じアニメーションを適用することでしたが、持続時間は 0.01 秒にしました。これで問題は解決しました。別の方法を見つけるか、CSS アニメーションが提供するのと同じ滑らかさを提供する jquery/javascript ソリューションを見つけるまで、私はこれに固執しています。

于 2013-09-24T08:24:52.400 に答える