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

将您的建筑 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/

于 2014-01-10T15:59:25.867 回答