3

skrollr を使用するのは初めてなので、ここ数時間、それを理解するために多くのことを試してきました。

建物の 3D 画像を表示する予定で、スクロールすると建物が 360 度回転します。現在、例として車を使用しています。大きな背景画像で、現在の場所に応じて背景の位置を変更しています。ここに私のコードのスニペットがあります:

<div data-0="" data-900="" class="skrollable skrollable-before ">                
            <div id="wrap"> 
                <div class="car" data-0="dispay:block;" data-50="display:none;background-position:!0 0px;"></div>
                <div class="car" data-0="display:none;" data-50="display:block;background-position:!0 -500px;" data-100="display:none;"></div>
                <div class="car" data-0="display:none;" data-100="display:block;background-position:!0 -1000px;" data-150="display:none;"></div>
                <div class="car" data-0="display:none;" data-150="display:block;background-position:!0 -1500px;" data-200="display:none;"></div>
                <div class="car" data-0="display:none;" data-200="display:block;background-position:!0 -2000px;" data-250="display:none;"></div>
                <div class="car" data-0="display:none;" data-250="display:block;background-position:!0 -2500px;" data-300="display:none;"></div>
            </div>
        </div>

これは正しく機能しています！

ただし、これは他のコンテンツで満たされた長いページになります。私がやりたいのは、ページが回転するときに建物がページに固定されるようにすることです。位置修正を使用してみましたが、他のすべてのコンテンツが引っ張られるので、少しおかしいようです。

どうすればこれを行うことができますか？

私は他のウェブサイトがそれを達成している例を見てきました.コードを調べてそれがどのように行われたかを調べてみましたが、それを見つけることができないようです.

どんな助けでも大歓迎です！

編集** これは私が最終的に得たものです：

<div class="wrap" 
        data-0="margin-top: -250px;" 
        data-_foobar--50="opacity: 0;" 
        data-_foobar-0="opacity: 1; display: block;"
            <div class="building"                
                data-_foobar-50="background-position:!0 0px;" 
                data-_foobar-100="background-position:!0 -500px;" 
                data-_foobar-150="background-position:!0 -1000px;"
                data-_foobar-200="background-position:!0 -1500px;" 
                data-_foobar-250="background-position:!0 -2000px;"
                data-_foobar-300="background-position:!0 -2500px;"
            >
            </div>
    </div>

「ラップ」の位置を修正し、非表示に設定してから、定数を使用してビューポートに入ったら表示しました。

var viewportHeight = $(window).height();
    var constantsData = Math.floor(viewportHeight * 1); 
    var s = skrollr.init({
        constants: {
            foobar: constantsData
        }
    });
4

1 に答える 1

2

body タグのすぐ下に建物の div を配置するか、相対的な位置を持つルート要素を配置します。

<body>
   <div class="building"></div>

.building
{
  position: fixed;
  z-index: 99;
  top: 10px;
  left: 10px;
  background-image: url(...)
}

必要に応じて上部と左側を変更できます。今、異なる data-.. を持つ多くの div を持つ代わりに、次のように 1 つだけを持つことができます:

 <div class="building" data-50="transform: rotate(45deg)" data-150="transform: rotate(90deg)" data-300="transform: rotate(135deg)"></div>

など...私は多くのWebサイトでskrollrを使用してきました。以下は、ソースを調べたいリンクです。

http://kiterungame.com/ http://lifesocks.me/

于 2014-01-10T15:59:25.867 に答える