0

Skrollrライブラリを使用して Parallax Web サイトを構築していますが、モバイル デバイスで表示すると、さまざまな結果が得られます。iPhone では視差効果が働きますが、デスクトップで見た場合とは画像の位置がまったく異なります。

Android では、視差効果はまったく機能しません。

Skrollr の Web サイトからダウンロードしたサンプルはモバイルでも動作しないため、少し面倒ですが、メインの Skrollr の Web サイトは動作します。

モバイルでのサイトの動作を妨げる明らかな見落としはありますか?

URL の例

http://wickywills.com/testing/skrollr/simple-parallax.html

HTML

<div id="skrollr-body">

<div id="slide-1" class="slide"
    data-center="background-position: 0% 0px;"
    data-top-bottom="background-position: 0% -200px;">
    <p>slide 1</p>
    <p>slide 1</p>
    <p>slide 1</p>
    <p>slide 1</p>
    <p>slide 1</p>
    <p>slide 1</p>
    <p>slide 1</p>
    <p>slide 1</p>
</div>

<div id="slide-2" class="slide"
    data-0-bottom-top="background-position: 0% 0px;"
    data-0-top-bottom="background-position: 0% -300px;">
    <p>slide 2</p>
    <p>slide 2</p>
    <p>slide 2</p>
    <p>slide 2</p>
    <p>slide 2</p>
    <p>slide 2</p>
    <p>slide 2</p>
    <p>slide 2</p>
</div>

<div id="slide-3" class="slide"
    data-center="background-position: 0% 0px;"
    data-top-bottom="background-position: 0% -100px;"
    data-anchor-target="#slide-3">
    <p>slide 3</p>
    <p>slide 3</p>
    <p>slide 3</p>
    <p>slide 3</p>
    <p>slide 3</p>
    <p>slide 3</p>
    <p>slide 3</p>
    <p>slide 3</p>
</div>

</div>

<script src="scripts/jquery.skrollr.min.js"></script>

CSS

#slide-1 { background: url(images/bg-spinnaker.jpg) fixed center center no-repeat; }
#slide-2 { background: url(images/bg-city.jpg) fixed right center no-repeat; }
#slide-3 { background: url(images/bg-laptop.jpg) fixed center center no-repeat; }
.slide { border-bottom: 5px solid #00f; min-height: 600px; }

JS

var s = skrollr.init();
4

1 に答える 1

2

こんにちは、私たちは同じ問題に直面していると思います。数日前、私はあなたのような問題を抱えていました。

私はすでにstackoverflowとskrollr github自体を検索しました。そして、skrollr github でposition: fixed.

したがって、「px」を「%」data-center="background-position: 0% 0px;"に変更してみてください。data-0-bottom-top="background-position: 0% 0%;「px」は固定位置として定義されると思います（私はまだそれを想定しています）。固定位置は必要ありません。

また、css で固定の background-attachment を使用しないでください。

これは私のサンプル プロジェクトです。ここで見つけることができます。

この回答がお役に立てば幸いです。ありがとうございました。

于 2014-05-09T05:22:44.557 に答える