Question

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

经过研究，我试图实现4个东西，其中只有一个有效。如果有人能告诉我我做错了什么以及skrollr数据属性，那就太棒了。

data-100和data-100p有什么区别？
何时使用data-start属性？它似乎没有改变任何东西，无论我是否使用它？
我不太明白css要求使动画工作 - 没有css的数据属性是不够的但我不知道该怎么做。
在我的代码中，我试图做4个动画：一个。将不透明度从“可见”更改为不可见（不透明度为0）/工作（作为唯一的动画）湾改变不透明度，但从不可见到可见/不起作用 C。使两个div滑开（从左到右，从右到右）/不起作用 d。滚动/播放不起作用时放大图片

我做了一个jsfiddle，所以你可以更好地看到它，并在这里包含我的代码。谢谢!!!

https://jsfiddle.net/codingcodingcoding/44yb72ps/2/

HTML：

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

的CSS：

    .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;
    }

JS：

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

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

0 个答案: