Skrollr: Выход выглядит по-другому, хотя я использую тот же код, что и пример

Question

Я следую первому базовому примеру на веб-сайте Skrollr. Вот их пример: http://prinzhorn.github.io/skrollr/examples/docu/1.html

Итак, я использую View Source и скопировать код в мой 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

О, его там, но вы добавили некоторые вращательный материал за пределами этого исходного примера. Перейдите в свой код и медленно прокрутите экран вывода 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>