Question

这是我第一次使用skrollr，所以最近几个小时我一直在尝试很多东西，以便掌握它。

计划是有一个建筑物的三维图像，当我滚动建筑物将转为360度。我目前正在使用汽车作为示例，它是在一个大的bg图像中，我根据我的位置改变背景的位置。以下是我的代码片段：

<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>

我修复了'wrap'的位置并将其设置为隐藏，然后使用常量显示在视口中。

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

Answer 1

将你的建筑div放在body标签下面或者根元素位置相对的位置。

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

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

您可以根据需要更改顶部和左侧。现在，您可以只使用以下内容，而不是使用具有不同数据的许多div ...

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

依旧...... 我在很多网站上都使用过skrollr，以下是您要检查来源的链接：

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

Skrollr：将div固定，以便在我到达正确位置后居中

1 个答案: