Javascript-Skrollr库-如何使用数据属性？我做错了什么？

我正在使用skrollr库，在它的官方页面（github）上找不到很多有用的解释，所以我一直在阅读stackoverflow等。我仍然无法理解如何使用skrollr及其数据属性

在研究之后，我尝试实现了4件事情，其中只有一件有效。如果有人能告诉我我做错了什么以及skrollr数据属性，那将是令人惊讶的

data-100和data-100p的区别是什么

何时使用数据开始属性？它似乎没有改变任何东西，无论我是否使用它

我不太明白css的要求，使动画的工作数据属性没有css是不够的，但我不知道该怎么做这里

在我的代码中，我尝试制作4个动画： A.将不透明度从“可见”更改为不可见（不透明度为0）/工作（作为唯一的动画） B将不透明度从不可见更改为可见/不起作用 C使两个div滑动（从左向左和从右向右）/不起作用 D滚动/关闭时放大图片不起作用

我制作了一个JSFIDLE，因此您可以更好地看到它，并在这里包含了我的代码。谢谢你

html:

js:

<div class="one" data-0='opacity: 1' data-100='opacity: 0'>
    </div>
    <div class="two" data-100="opacity: 0" data-200="opacity: 1"></div>
    <div class="three">
        <div class="three-left" data-200="left: 0%;">
        </div>
        <div class="three-right" data-200="left: 50%;">
        </div>
    </div>
    <div class="four" data-0='transform: scale(1.0,1.0);' data-150p='transform: scale(1.3, 1.3);opacity: 1;' data-200p='opacity: 0; transform: scale(6, 6);'></div>
    <div class='section' data-bottom-top="background-position: 50% 100%" data-top-bottom="background-position: 50% 0%">
    </div>

    .one {
        background-image: url('http://unsplash.imgix.net/reserve/9Fx2auQ4yoHM8OpWA8qw__MG_5265.jpg?fit=crop&fm=jpg&h=700&q=75&w=1050');
        width: 100%;
        height: 100%;
    }
    .two {
        background-color: red;
        width: 100%;
        height: 100%;
    }
    .three {
        width: 100%;
        height: 100%;
        display: block;
        .three-left {
            width: 50%;
            height: 100%;
            left: 0%;
            background-color: green;
        }
        .three-right {
            width: 50%;
            height: 100%;
            left: 50%;
            background-color: yellow;
        }
    }
    -four {
        width: 100%;
        height: 100%;
        background-color: yellow;
    }

    ( function( $ ) {
        // Init Skrollr
        var s = skrollr.init({
            render: function(data) {
            }
        });
    } )( jQuery );