Question

我对如何实施skrollr.js的理解存在一些问题。

我只想获得与此相同的效果：仅限MULTI PARALLAX。

你如何实现这样的事情：

http://prinzhorn.github.io/skrollr/

我尝试在CodePen中使用这个，但它不像上面的示例那样滚动。

HTML

<body style="height:1200px;">
    <div id="bg1" data-0="background-position:0px 0px;" data-end="background-position:-500px -10000px;" class="skrollable skrollable-between" style="background-position: 0px 0px;"></div>
    <div id="bg2" data-0="background-position:0px 0px;" data-end="background-position:-500px -10000px;" class="skrollable skrollable-between" style="background-position: 0px 0px;"></div>
    <div id="bg3" data-0="background-position:0px 0px;" data-end="background-position:-500px -10000px;" class="skrollable skrollable-between" style="background-position: 0px 0px;"></div>
</body>

 <script src="https://code.jquery.com/jquery-2.0.3.min.js"></script>
 <script src="https://prinzhorn.github.io/skrollr/dist/skrollr.min.js"></script>

CSS

#bg1, #bg2, #bg3 {
    z-index: 50;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(https://prinzhorn.github.io/skrollr/examples/images/bubbles.png) repeat 0 0;
}

#bg2 {
    z-index: 49;
    background-image: url(https://prinzhorn.github.io/skrollr/examples/images/bubbles2.png);
}

#bg3 {
    z-index: 48;
    background-image: url(https://prinzhorn.github.io/skrollr/examples/images/bubbles3.png);
}

.skrollable {
    /*
     * First-level skrollables are positioned relative to window
     */
    position:fixed;

    /*
     * Skrollables by default have a z-index of 100 in order to make it easy to position elements in front/back without changing each skrollable
     */
    z-index:100;
}

.skrollr-mobile .skrollable {
    /*
     *  May cause issues on Android default browser (see #331 on GitHub).
     */
    position:absolute;
}

.skrollable .skrollable {
    /*
     * Second-level skrollables are positioned relative their parent skrollable
     */
    position:absolute;
}

.skrollable .skrollable .skrollable {
    /*
     * Third-level (and below) skrollables are positioned static
     */
    position:static;
}

JS

(function($){

     skrollr.init();

})(jQuery);

希望你能开导我。我虽然还是诺布谢谢！

Answer 1

我不知道这是否是您想要的视差效果，但 here 可以帮助您解决并使用它。

此外，我已更新您的代码，并使用data-100-start和data-100-end属性进行了多视差滚动演示。

<div id="bg1" data-100-start="background-position:0px 0px;" data-100-end="background-position:-500px -10000px;" class="skrollable skrollable-between" style="background-position: 0px 0px;"></div>
<div id="bg2" data-100-start="background-position:0px 0px;" data-100-end="background-position:-500px -10000px;" class="skrollable skrollable-between" style="background-position: 0px 0px;"></div>
<div id="bg3" data-100-start="background-position:0px 0px;" data-100-end="background-position:-500px -10000px;" class="skrollable skrollable-between" style="background-position: 0px 0px;"></div>

请参阅此fiddle。

如何使用Skrollr.js实现Multiparallax滚动

1 个答案: