Skrollr：雖然我使用與示例相同的代碼，但輸出看起來不同

Question

我正在關注Skrollr網站上的第一個基本示例。 這裏是他們的榜樣：http://prinzhorn.github.io/skrollr/examples/docu/1.html

所以，我用查看源文件和代碼複製到我的codepen.io這裏瞭解並與它閃爍：http://codepen.io/Chiz/pen/JYvxOv

現在，這裏的超級怪神祕的東西：雖然代碼是相同的（響應代碼部分是我沒有複製的唯一部分），「WOOOT」上的藍色條不會顯示在我的。另外，他們的例子有一個垂直滾動條，而我的例子沒有。

這裏發生了什麼？在他們的例子中，我沒有看到任何CSS或任何CSS文件的鏈接，所以我想也許他們有一些後端服務器技術，它可以動態地改變這個示例文件，並且給它額外的CSS屬性和其他代碼，不知道。

$(document).ready(function() { 
 
    var s = skroll.init(); 
 
});

<div id="skrollr-body"> 
 
    spacer 
 
    <br>spacer 
 
    <br>spacer 
 
    <br>spacer 
 
    <br>spacer 
 
    <br>spacer 
 
    <br>spacer 
 
    <br>spacer 
 
    <br>spacer 
 
    <br>spacer 
 
    <br>spacer 
 
    <br>spacer 
 
    <br>spacer 
 
    <br>spacer 
 
    <br>spacer 
 
    <br>spacer 
 
    <br>spacer 
 
    <br>spacer 
 
    <br>spacer 
 
    <br>spacer 
 
    <br>spacer 
 
    <br>spacer 
 
    <br>spacer 
 
    <br>spacer 
 
    <br>spacer 
 
    <br>spacer 
 
    <br> 
 
    <div id="foo" data-0="background-color:rgb(0,0,255);" data-500="background-color:rgb(255,0,0);">WOOOT</div> 
 
</div>

Answer 1

哦，它的存在，但你已經加入了一些東西旋轉超出了原來的例子。轉到您的codepen，並慢慢滾動html輸出屏幕。

這裏是你添加多餘的東西：

<div data-0="background-color:rgb(0,0,255); 
      transform[bounce]:rotate(0deg);" 
    data-top="background-color:rgb(255,0,0); 
       transform[bounce]:rotate(360deg);"> 
    WOOOT 
</div>