添加多个图层

时间:2013-11-13 10:35:29

标签: javascript parallax cool-kitten stellar.js

我正在使用框架Cool Kitten进行视差项目(因为它具有响应性)。该框架使用stellar.js,它支持多个视差层。 Cool Kitten没有提供任何文档,也不可能直接使用stellar.js文档。

我想要的是拥有三个视差层,但我无法弄清楚如何使用Cool Kitten。

根据stellar.js文档,你这样做......

<div class="slide" id="slide3" data-slide="3" data-stellar-background-ratio="0.5">
    <div class="wrapper">
        <img src="images/slide3/freelance.png" data-stellar-ratio="1.4" data-stellar-vertical-offset="-102"alt="">
        <img src="images/slide3/psdtuts.png" data-stellar-ratio="1.5" data-stellar-vertical-offset="-53"alt="">
        <img src="images/slide3/rockable.png" data-stellar-ratio="2.7" data-stellar-vertical-offset="-200"alt="">
        <img src="images/slide3/themeforest.png" data-stellar-ratio="3" data-stellar-vertical-offset="-200"alt="">
        <img src="images/slide3/tutshub.png" data-stellar-ratio="1" data-stellar-vertical-offset="-200"alt="">
        <img src="images/slide3/psdtuts.png" data-stellar-ratio="1.5" data-stellar-vertical-offset="-200"alt="">
    </div>

    <span class="slideno">Slide 3</span>
    <a class="button" data-slide="4" title=""></a>

</div>

...但是当使用Cool Kitten尝试此代码时,它不起作用,并且图像并排显示,没有任何视差效果。

那么,如何用Cool Kitten添加多个视差层?

1 个答案:

答案 0 :(得分:0)

酷小猫有很大的潜力,但它仍然处于测试阶段并且缺少一些功能,例如支持多个视差层(它没有)。我希望这是他们将在未来的框架版本中添加的东西。

参考文献:HereHere